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前” 言 


读 懂 本 书 
TypeScript 是 什么 ? 


TypeScript 是 微软 开发 的 一 款 开源 的 编程 语言 。 它 是 JavaScript 的 超 集 ， 本 质 上 是 在 
JavaScript 语言 上 添加 了 可 选 的 静态 类 型 和 基于 类 的 面向 对 象 编程 特征 。 
一 一 微软 出 品 ， 必 属 精品 。 


TypeScript 对 比 JavaScript， 有 了 哪些 优势 ? 


首先 ，TypeScript 中 的 类 型 检查 可 以 在 编译 阶段 进行 语法 分 析 ， 从 而 检测 语法 错误 ， 
同时 提高 代码 可 读 性 。 其 次 ，TypeScript 可 以 用 面向 对 象 进行 编程 ， 支 持 类 、 接 口 、 命 名 
空间 以 及 模块 。 再 次 ，TypeScript 有 强大 的 IDE 工具 支持 ， 提 供 先 进 的 自动 完成 、 导 航 和 
重 构 工 具 ， 而 这 些 工 具 几 乎 完全 满足 了 大 型 项 目的 需求 。 最 后 ，TypeScript 可 以 兼容 绝 大 
部 分 JavaScript 语法 ， 同 时 可 以 编译 为 特定 版 本 的 JavaScript。 

一 一 TypeScript 就 是 为 构建 大 型 可 扩展 Web 应 用 而 生 的 。 


TypeScript 可 以 干什么 ? 


TypeScript 可 以 在 任何 支持 JavaScript 的 环境 下 运行 ,无 须 额外 配置 。 大 名 易 易 的 Visual 
Studio Code 就 是 用 TypeScript 编写 的 ， 同 时 新 版 本 的 angular 和 Vue 3.0 都 选用 TypeScript 
作为 编写 语言 。 

一 一 只 要 敢 想 ，TypeScript 让 一 切 篆 有 可 能 。 


本 书 真 的 适合 你 吗 ? 


如 果 你 对 编程 有 一 定 兴趣 ， 了 解 基本 的 HTML、CSS 和 JavaScript 语法 ， 心 怀 用 代码 
改变 世界 的 理想 ， 励 志 构 建 可 扩展 易 维 护 的 Web 应 用 ， 那 么 本 书 很 适合 你 。 本 书 作为 
TypeScript 的 入 门 教材 ， 由 浅 入 深 地 对 TypeScript 的 基本 语法 进行 介绍 ， 同 时 结合 实战 项 
目 来 说 明 各 个 知识 点 如 何 进行 有 机 整合 ， 做 到 理论 联系 实际 。 


TypeScript 实战 


一 一 怕 TypeScript 学 不 会 ? TypeScript 比 JavaScript 更 容易 学 习 , 借助 IDE 开发 工具 ， 
可 以 非常 方便 地 进行 代码 编写 和 调试 。 


示例 代码 、 课 件 与 教学 视频 下 载 


本 书 示例 代码 、 课 件 与 教学 视频 下 载 地址 请 通过 扫描 右边 二 维 码 
获得 。 

如 果 下 载 有 问题 ， 请 电子 邮件 联系 booksaga@163.com， 邮 件 主题 
为 “TypeScript 实战 ”。 


本 书 特 点 


(1) 理论 联系 实际 ， 先 从 基本 语法 出 发 ， 然 后 对 数组 、 元 组 、 函 数 、 类 、 接 口 以 及 
模块 等 知识 点 进行 讲解 ， 并 结合 代码 进行 阐述 ， 最 后 通过 一 个 实战 项 目 说 明 如 何 从 头 到 尾 
搭建 一 个 简单 的 列表 App。 

(2) 由 浅 入 深 、 轻 松 易学 ， 以 实例 为 主线 ， 激 发 读者 的 阅读 兴趣 ， 让 读者 能 够 真正 
学 习 TypeScript 实用 、 前 沿 的 技术 。 

(3) 技术 新 颖 、 与 时 俱 进 ， 结 合 时 下 热门 技术 ， 如 Nodejs、 移 动 开 发 和 Restful API 
等 让 读者 在 学 习 TypeScript 的 同时 了 解 熟识 更 多 相关 的 先进 技术 。 

(4) 配备 课件 与 教学 视频 ， 让 读者 可 以 在 学 习 过 程 中 更 轻松 地 理解 相关 知识 点 及 概念 。 


本 书 读者 


@ ”Web 前 端 开发 初学 者 

前 端 开 发 工程 师 

对 前 端 开发 有 兴趣 的 后 端 开发 人 员 

想 用 JavaScript 构建 大 型 可 扩展 应 用 的 技术 人 员 
喜欢 网 页 设计 的 高 校 的 学 生 

可 作为 各 种 培训 学 校 的 入 门 + 实践 教程 
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JavaScript 可 以 说 是 当前 Web 开发 中 流行 的 脚本 语言 , 是 作为 前 端 开发 工程 师 必 备 的 一 项 
技能 。 随 着 编程 技术 的 发 展 ，JavaScript 现在 已 经 成 为 一 门 功能 全 面 的 编程 语言 ， 能 够 处 理 复 
杂 的 计算 和 交互 。Node.js 的 出 现 ， 让 JavaScript 可 以 编写 服务 端 代码 ，Node.js 的 出 现 使 得 
JavaScript 成 为 与 PHP、Python、Perl 和 Ruby 等 服务 端 脚 本 语言 平起平坐 的 语言 。 在 目前 各 
类 应 用 程序 Web 化 和 移动 化 的 背景 下 ，JavaScript 语言 可 谓 如 日 中 天 。 

JavaScript 是 弱 类 型 的 语言 ， 设 计 得 过 于 灵活 ， 导 致 编写 的 代码 可 能 存在 预期 之 外 的 各 类 
奇 葛 Bug， 因 此 在 使 用 JavaScript 构建 大 型 可 扩展 的 应 用 时 ， 可 能 会 出 现代 码 后 续 难以 升级 和 
维护 的 情况 。 

那么 有 没有 这 样 一 种 语言 ， 既 可 以 兼容 标准 的 JavaScript 语法 ， 同 时 又 具有 C# 或 Java 这 
类 高 级 语言 的 若干 特征 呢 ? 如 可 以 采用 面向 对 象 的 编程 方法 ， 分 模块 地 构建 JavaScript 库 和 
Web 应 用 ; 在 编写 JavaScript 代码 时 ， 可 以 实现 智能 语法 提示 ， 并 在 编码 (编译 ) 阶段 发 现 语 
法 和 类 型 错误 ， 从 而 降低 代码 在 运行 时 的 错误 率 。 

鉴于 JavaScript 目前 在 构建 大 规模 、 可 扩展 应 用 上 的 不 足 ， 微 软 公 司 设计 了 TypeScript 语 
言 。TypeScript 语言 具有 静态 类 型 检测 和 面向 对 象 的 特征 , 在 编译 阶段 可 以 及 时 发 现 语法 错误 ， 
同时 支持 分 模块 开发 ， 编 译 后 转换 成 原生 的 JavaScript 代码 ， 可 以 直接 运行 在 各 类 浏览 器 上 ， 
而 不 需要 额外 的 配置 。 

通过 本 章 的 学 习 , 可 以 让 读者 了 解 TypeScript 的 基本 概念 以 及 开发 环境 搭建 。 本 章 主 要 涉 
及 的 知识 点 有 : 


@ TypeScript 相关 概念 。 

@ TypeScript 和 JavaScript 区 别 。 

@ TypeScript 相 比 JavaScript 具有 哪些 优势 。 

@ TypeScript 开发 环境 搭建 ， 学 会 基本 的 TypeScript 开发 环境 搭建 ， 以 及 构建 第 一 个 简 
单 的 TypeScript 应 用 。 


画 本 章 重点 介绍 一 下 TypeScript 背景 ， 下 一 章 开始 介绍 TypeScript 的 基本 语法 知识 。 
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什么 是 TypeScript 


TypeScript 是 微软 公司 开发 的 开源 编程 语言 。 它 本 质 上 是 在 JavaScript 语言 中 添加 了 可 选 
的 静态 类 型 和 基于 类 的 面向 对 象 编程 等 新 特征 。TypeScript 是 由 大 神 Anders Hejlsberg 主导 设 
计 的 。 他 是 Turbo Pascal 编译 器 的 主要 作者 、Delphi、C# 和 TypeScript 之 父 以 及 .NET 的 创立 
者 ， 有 评论 说 他 对 语言 和 汇编 的 理解 全 世界 没 几 个 人 能 超越 ， 足 见 其 造 衣 之 高 。 

2012 年 10 月 ,微软 发 布 第 一 个 TypeScript 版 本 ,截止 到 此 书写 作 时 , 最 新 版 本 为 TypeScript 
3.3， 经 过 多 次 版 本 的 迭代 ， 目 前 TypeScript 语言 已 经 日 趋 成 熟 。 

维基 百科 〈https:Wen.wikipedia.org/wiki/TypeScript) 中 整理 的 关于 TypeScript 的 历史 版 本 
如 表 1.1 所 示 。 


表 1.1 TypeScript 的 历史 版 本 


发 布 日 期 重大 变化 

2012 年 10 月 1 日 首次 发 布 

2013 年 6 月 18 日 无 

2014 年 10 月 6 日 性 能 改进 ，1.1 版 本 的 编译 器 速度 比 之 前 发 布 的 版 本 快 4 倍 
2014 年 11 月 12 日 “| protected 修饰 符 ， 元 组 类 型 

2015 年 1 月 20 日 联合 类 型 ，let 和 const 声明 ， 类 型 别名 等 

2015 年 7 月 20 日 ES6 模块 ，namespace 关键 字 ，for.of 支持 ， 装 饰 器 


JSX 支持 ， 交 集 类 型 ， 本 地 类 型 声明 ， 抽 象 类 和 方法 ， 用 户 定义 的 类 型 
保护 功能 


2015 年 11 月 30 日 async 和 await 支持 
2016 年 2 月 22 日 约束 泛 型 ， 控 制 流 分 析 错 误 和 allowJs 选项 


null 和 undefined 类 型 ， 基 于 控制 流 的 类 型 分 析 ， 区 分 联合 类 型 ，never 
类 型 ，readonly 关键 字 和 this 函数 类 型 


2016 年 11 月 8 日 keyof 和 查找 类 型 ， 映 射 类 型 

2017 年 2 月 22 日 混合 类 ，object 类 型 

2017 年 4 月 27 日 async 迭代 ， 泛 型 参数 默认 值 ， 严 格 选项 

2017 年 6 月 27 日 动态 导入 表达 式 ， 字 符 串 枚 举 , 泛 型 的 改进 推理 ， 回 调 参数 的 严格 逆 解 
2017 年 8 月 31 日 可 选 的 catch 子 句 变量 

2017 年 10 月 31 日 严格 的 功能 类 型 

2018 年 1 月 31 日 常量 命名 属性 ， 固 定 长 度 元 组 

2018 年 3 月 27 日 条 件 类 型 ，keyof 改进 


2015 年 9 月 16 日 


2016 年 9 月 22 日 
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( 续 表 ) 
版 本 号 | 发 布 日 期 重大 变化 
2.9 2018 年 5 月 14 日 支持 keyof 和 映射 对 象 类 型 中 的 符号 和 数字 文字 
30 | 2018 年 7 月 30 日 。 | 项 目 引用 ， 使 用 元 组 提取 和 传播 参数 列表 
31 。 |2018 年 9 月 27 日 。 | 可 映射 的 元 组 和 数组 类 型 
32 2018 年 11 月 30 日 ”| 更 严格 地 检查 绑 定 和 调用 
33 |2019 年 1 月 31 日 。 | 关于 联合 类 型 方法 的 宽松 规则 ， 复 合 项 目的 增 量 构建 


那么 到 底 什 么 是 TypeScript 呢 ? 

TypeScript 是 JavaScript 的 超 集 ， 专 门 为 开发 大 规模 可 扩展 的 应 用 程序 而 设计 ， 且 可 编译 
为 原生 JavaScript 的 一 种 静态 类 型 语言 。TypeScript 从 命名 上 可 以 看 出 是 由 Type 和 Script 组 成 
的 ， 其 中 Type 表示 是 一 种 类 型 语言 ， 可 以 进行 静态 类 型 检查 ，Script 表示 是 兼容 JavaScript 
的 脚本 语言 。 

编程 语言 中 类 型 系统 是 提高 代码 性 能 的 一 个 关键 因素 , 类 型 系统 对 构建 优化 的 编译 器 和 进 
行 语 法 正确 性 检查 等 非常 有 用 。 同 时 类 型 系统 可 以 为 集成 开发 环境 (Integrated Development 
Environment， 简 称 IDE ) 提供 智能 代码 补 全 、 重 构 和 代码 导航 这 些 功能 ， 而 这 背后 都 离 不 开 
具有 类 型 系统 的 编译 器 。 

如 果 和 希望 编程 语言 具有 可 维护 性 , 在 灵活 和 规范 之 间 寻 求 合适 的 度 非 常 重要 。 动态 语言 鸡 
于 开发 小 型 项 目 非常 有 用 ， 但 大 型 项 目 需要 采用 严格 的 类 型 检查 。Python 作者 Guido 计划 在 
Python 语言 中 也 添加 类 似 TypeScript 的 类 型 系统 技术 。 

TypeScript 和 JavaScript 的 逻辑 关系 可 以 用 图 1.1 表示 。 


TypeScript 


JavaScript 


1.1 TypeScript 和 JavaScript 的 关系 图 


虽然 图 1.1 表示 的 是 TypeScript 包含 JavaScript, 但 还 有 极 少数 JavaScript 语法 在 TypeScript 
\ 中 不 支持 ， 如 with。 


在 很 多 介绍 JavaScript 和 TypeScript 的 地 方 都 会 涉及 一 个 名 词 ECMAScript。 这 里 有 必要 
先 介绍 一 下 ECMAScript 的 基本 概念 。 
ECMAScript 是 一 种 由 ECMA 国际 〈European Computer Manufacturers Association ) 通过 
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ECMA-262 标准 化 的 脚本 程序 设计 语言 。ECMAScript 可 以 理解 为 JavaScript 的 标准 规范 。 到 
写本 书 为 止 有 6 个 ECMAScript 版 本 ， 具 体 如 表 1.2 所 示 。 


表 12 ECMAScript 版 本 


版 本 时 间 说 明 

ECMAScript 1997 年 06 月 首 版 

ECMAScript2 1998 年 06 月 格式 修正 ， 以 使 得 其 形式 与 ISO/TEC16262 国际 标准 一 致 
强大 的 正则 表达 式 ， 更 好 的 文字 链 处 理 ， 新 的 控制 指令 ， 异 常 

ECMAScript 3 1999 年 12 月 


处 理 ， 错 误 定 义 更 加 明确 ， 数 字 输 出 的 格式 化 及 其 他 改变 
ECMAScript4 放弃 发 布 

完善 了 ECMAScript 3 版 本 、 增 加 严格 模式 "strict mode" 以 及 新 

的 功能 ， 如 getter 和 setter、JSON 库 支持 和 更 完整 的 对 象 属性 

ECMAScript 5.1 2011 年 06 月 使 规范 更 符合 ISOTEC16262:2011 第 三 版 

ECMAScript6 (ES6) ， 也 称 为 ECMAScript 2015 (ES2015) 。 

增加 了 非常 重要 的 内 容 : let、const、class、modules、arrow 

functions, template string、 destructuring、 default, rest argument、 

binary data、promises 等 

也 被 称 为 ECMAScript 2016 (ES2016)。 主 要 是 完善 ES6 规范 ， 

ECMAScript 7 2016 年 06 月 除 此 之 外 还 包括 两 个 新 的 功能 : 求 军 运 算 符 (**) 和 

array.prototype.includes 方法 

增加 新 的 功能 ， 如 并 发 、 原 子 操作 、 字 符 串 填充 、Object.values 


和 Object.entries、await/async 等 


ECMAScript 5 2009 年 12 月 


ECMAScript 6 2015 年 06 月 


ECMAScript 8 2017 年 06 月 


虽然 ECMAScript 6 有 大 量 的 更 新 ， 但 是 它 依旧 完全 向 后 兼容 以 前 的 版 本 。 各 主流 浏览 器 
的 新 版 本 基本 都 支持 ECMAScript 5 特征 , 具体 可 以 访问 https://caniuse.com 网 址 输入 ES5 关键 
词 进行 查询 ， 如 图 1.2 所 示 。 


ECMAScript 5 -owner Us Wof a 
Global 9215% + 2 

Full support for the ECMAScript 5 specification. Features include 

Function. prototype.bind, Array methods like indexof, forEach, 

map & filter, Object methods like defineProperty, create & keys, 

the trim method on Strings and many more. 


”Android * Blackbery Ope * Chremefor Firefoxfor EMobile 
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图 1.2 ES5 各 浏览 器 支持 情况 
截止 到 写 此 书 时 ，ES6 的 新 特征 仍然 没有 被 目前 所 有 主流 浏览 器 所 支持 , 所 以 热衷 于 使 用 
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ES6 最 新 特性 的 开发 者 需要 将 代码 转译 为 ES5 代码 。 若 想 一 睹 各 浏览 器 对 于 ES6 特性 的 具体 
支持 情况 ， 这 里 推荐 参考 由 kangax 维护 的 ECMAScript 兼容 表 (ECMAScript Compatibility 
Table) ， 网 址 为 https://kangax.github.io/compat-table/es6/。 

TypeScript 与 ECMAScript 6 规范 一 致 。TypeScript 设计 的 目标 是 让 JavaScript 语言 可 以 用 
来 编写 复杂 的 大 型 应 用 程序 , 成 为 企业 级 开发 语言 。TypeScript 的 语言 功能 除 符合 ECMAScript 
6 规范 外 ， 还 包含 泛 型 和 类 型 注释 等 功能 ， 这 些 功能 是 对 ECMAScript 6 规范 的 扩展 。 


各 一 般 来 说 ，TypeScript 需要 编译 成 JavaScript 才能 运行 。 | 


TypeScript 语言 具有 如 下 特点 : 

@@ TypeScript 以 JavaScript 为 基础 

TypeScript 是 JavaScript 的 超 集 ， 意 味 着 合法 的 JavaScript 代码 〈 也 有 少数 例外 ) 可 以 直 
接 保存 成 扩展 名 为 .ts 的 文件 ， 即 可 用 TypeScript 编译 器 进行 编译 并 运行 。 

@ TypeScript 支持 第 三 方 JavaScript 库 


由 于 TypeScript 在 编译 后 就 转 成 原生 的 JavaScript 代码 ， 因 此 第 三 方 JavaScript 框架 或 工 
有 具 可 以 很 方便 地 在 TypeScript 代码 中 进行 引用 。 


@ TypeScript 是 可 移植 的 


TypeScript 是 可 以 跨 浏览 器 、 设 备 和 操作 系统 进行 移植 的 ， 即 “一 处 编写 ， 多 处 运行 ”。 
它 可 以 在 JavaScript 的 任何 环境 中 运行 ， 而 且 可 以 用 ES6 的 语法 来 编写 代码 ， 通 过 配置 生成 
ES5 版 本 〈 或 其 他 版 本 ) JavaScript 代码 。 


@ TypeScript 是 静态 类 型 语言 


TypeScript 是 静态 类 型 语言 ， 可 以 在 代码 编辑 阶段 进行 类 型 检查 ， 及 时 发 现 语法 等 错误 ， 
以 提高 代码 的 稳定 性 。 


1,2 为 什么 要 学 习 TypeScript 


任何 一 门 语言 的 诞生 和 发 展 都 是 有 缘由 的 ， 从 某 种 程度 上 来 说 ，TypeScript 语言 的 诞生 是 
历史 发 展 的 必然 。 目 前 Web 应 用 越 来 越 复杂 ， 必 然 导致 JavaScript 代码 的 快速 增长 。 

由 于 目前 各 主流 浏览 器 中 的 JavaScript 引擎 还 没有 完全 实现 ES6 的 特征 ， 如 JavaScript 模 
块 导 入 与 导出 和 面向 对 象 编程 中 的 类 与 接口 等 。 另 外 ，JavaScript 是 一 种 动态 语言 ， 很 难 做 到 
静态 类 型 检查 。 这 将 导致 很 多 JavaScript 语法 问题 在 编码 阶段 无 法 暴露 , 而 只 能 在 运行 时 暴露 。 

在 这 种 背景 下 ， 微 软 使 用 Apache 授权 协议 推出 开源 语言 TypeScript， 增 加 了 可 选 类 型 、 
类 和 模块 等 特征 ， 可 编译 成 标准 的 JavaScript 代码 ， 并 保证 编译 后 的 JavaScript 代码 兼容 性 。 
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另外 ,TypeScript 是 一 门 静 态 类 型 语言 ,本 身 具 有 静态 类 型 检查 的 功能 , 很 好 地 弥补 了 JavaScript 
在 静态 类 型 检查 上 的 不 足 。 

因此 ，TypeScript 非常 适合 开发 大 规模 可 扩展 的 JavaScript 应 用 程序 。 这 也 是 我 们 要 学 习 
TypeScript 的 主要 原因 。 换 句 话 说， 学 习 TypeScript 可 以 让 开发 和 维护 大 规模 可 扩展 的 
JavaScript 应 用 程序 以 满足 目前 日 益 复杂 的 Web 应 用 对 JavaScript 的 要 求 。 

不 能 说 TypeScript 有 多 牛 ， 只 能 说 TypeScript 顺应 了 时 代 。TypeScript 带 有 编译 期 类 型 检 
查 ,在 编写 大 规模 应 用 程序 的 时 候 有 明显 优势 ,更 容易 进行 代码 重 构 和 让 别人 理解 代码 的 意图 。 
TypeScript 语言 从 C# 语 言 中 继承 了 很 多 优雅 的 设计 ， 比 如 枚 举 、 泛 型 等 语言 特性 ， 这 让 
TypeScript 在 语法 上 更 加 优雅 。 


1.2.1 TypeScript 与 JavaScript 对 比 有 什么 优势 


TypeScript 和 JavaScript 的 关系 实际 上 就 像 Java 和 Groovy 的 关系 ， 一 个 静态 ， 一 个 动态 ， 
前 者 稳健 ， 后 者 灵活 。 

JavaScript 是 一 种 脚本 语言 ， 无 须 编译 ， 基 于 对 象 和 事件 驱动 ， 只 要 嵌入 HTML 代码 中 ， 
就 能 由 浏览 器 逐 行 加 载 解释 执行 ，JavaScript 的 语法 虽然 简单 ， 但 是 比较 难以 掌握 ， 使 用 的 变 
量 为 弱 类 型 ， 比 较 灵 活 。 

TypeScript 是 微软 开发 和 维护 的 一 种 具有 面向 对 象 功能 的 编程 语言 , 是 JavaScript 的 超 集 ， 
可 以 载 入 JavaScript 代码 运行 ， 并 扩展 了 JavaScript 的 语法 。TypeScript 增加 了 静态 类 型 、 类 、 
模块 、 接 口 和 类 型 注解 等 特征 。 

概括 起 来 ，TypeScript 与 JavaScript 相 比 ， 主 要 具有 以 下 优势 : 


@ ”编译 时 检查 

TypeScript 是 静态 类 型 的 语言 ， 静 态 类 型 可 以 让 开发 工具 编译 器 ) 在 编码 阶段 (编译 阶 
段 ) 即时 检测 各 类 语法 错误 。 对 于 任何 一 门 语言 来 说 , 利用 开发 工具 即时 发 现 并 提示 修复 错误 
是 当今 开发 团队 的 迫切 需求 。 有 了 这 项 功能 后 ,就 会 让 开发 人 员 编写 出 更 加 健壮 的 代码 ， 同 时 
也 提高 了 代码 的 可 读 性 。 

@。 面向 对 象 特征 

面向 对 象 编程 可 以 更 好 地 构建 大 规模 应 用 程序 , 通过 对 现实 问题 合理 的 抽象 , 可 以 利用 面 
向 对 象 特征 中 的 接口 、 类 等 来 构建 可 复 用 、 易 扩展 的 大 型 应 用 程序 。TypeScript 支持 面向 对 象 
功能 ， 可 以 更 好 地 构建 大 型 JavaScript 应 用 程序 。 

@ ”更 好 的 协作 

当 开发 大 型 项 目 时 ， 会 有 许多 开发 人 员 参 与 ， 此 时 分 模块 开发 尤其 重要 。TypeScript 支持 
分 模块 开发 这样 可 以 更 好 地 进行 分 工 协作 ,最 后 在 合并 的 时 候 解决 命名 冲突 等 问题 ,这 对 于 
团队 协作 来 说 是 至 关 重要 的 。 
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@ 更 强 的 生产 力 


TypeScript 遵循 ES6 规范 ， 可 以 让 代码 编辑 器 (IDE) 实现 代码 智能 提示 ， 代 码 自动 完成 
和 代码 重 构 等 操作 ， 这 些 功能 有 助 于 提高 开发 人 员 的 工作 效率 。 


二 不 是 任何 规模 的 Web 应 用 都 适合 用 TypeScript， 对 于 小 规模 应 用 JavaScript 可 能 更 合适 。 | 


1.2.2 TypeScript 给 前 端 开发 带 来 的 好 处 


鉴于 前 面 阐述 的 TypeScript 语言 的 设计 初衷， 以 及 相 比 JavaScript 的 若干 优势 ， 可 以 概括 
出 TypeScript 给 前 端 开发 带 来 的 好 处 : 


@ ”提高 编码 效率 和 代码 质量 


传统 的 JavaScript 在 编写 代码 时 ， 往 往 比 较 痛苦 的 是 没有 一 个 很 好 的 编辑 器 〈IDE) ， 可 
以 像 C# 或 者 Java 那样 ，IDE 对 代码 进行 智能 提示 和 语法 错误 检查 ， 从 而 导致 JavaScript 代码 
在 编码 阶段 很 难 发 现 潜在 的 错误 。 

TypeScript 是 一 种 静态 类 型 语言 ， 可 以 让 编辑 器 实现 包括 代码 补 全 、 接 口 提示 、 跳 转 到 定 
义 和 代码 重 构 等 操作 。 借助 编辑 器 , 可 以 在 编译 阶段 就 发 现 大 部 分 语法 错误 , 这 总 比 JavaScript 
在 运行 时 发 现 错误 要 好 得 多 。 

@ ”增加 了 代码 的 可 读 性 和 可 维护 性 


一 般 来 说 ， 理 解 C# 代 码 或 者 Java 代码 会 比 JavaScript 代码 更 加 容易 ， 因 为 C# 或 Java 语 
言 是 强 类 型 的 , 且 支 持 面向 对 象 特征 。 强 类 型 语言 本 身 就 是 一 个 很 好 的 说 明文 档 ， 大 部 分 函数 
可 以 看 类 型 定义 就 大 致 明白 如 何 使 用 。JavaScript 很 多 库 中 利用 了 不 少 高 级 语言 特征 ， 开 发 人 
员 可 能 无 法 很 好 地 理解 其 意图 。 


@ ”胜任 大 规模 应 用 开发 


TypeScript 是 具有 面向 对 象 特征 的 编程 语言 ， 在 大 规模 应 用 开发 中 ， 可 以 利用 模块 和 类 等 
特征 对 代码 进行 合理 规划 ， 达 到 高 内 聚 低 耦 合 的 目的 。TypeScript 可 以 让 复杂 的 代码 结构 更 加 
清晰 、 一 致 和 简单 ， 降 低 了 代码 后 续 维护 和 升级 的 难度 。 因 此 ， 在 面 对 大 型 应 用 开发 时 ， 使 用 
TypeScript 往往 更 加 合适 。 


@ ”使 用 最 先进 的 JavaScript 语法 


TypeScript 语法 遵循 ES6 规范 ， 由 于 其 语法 和 JavaScript 类 似 ， 因 此 前 端 从 JavaScript 转 
入 TypeScript 会 感觉 差异 并 不 大 ， 降 低 了 TypeScript 的 学 习 难 度 。TypeScript 更 新 速度 较 快 ， 
不 断 支 持 最 新 的 ECMAScript 版 本 特性 ， 以 帮助 构建 强大 的 Web 应 用 。 

TypeScript 可 以 让 前 端 开发 人 员 利用 先进 的 JavaScript 功能 去 编写 代码 ， 然 后 通过 编译 ， 
自动 生成 针对 ES5 或 者 ECMAScript 3 环境 的 JavaScript， 让 先进 的 技术 落地 。 
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安装 TypeScript 


前 面 阐述 了 TypeScript 的 相关 概念 ,以 及 TypeScript 相 比 JavaScript 来 说 具备 的 若干 优势 。 
作为 程序 员 来 说 ,经常 挂 在 嘴 上 的 是 “ 光 说 好 没 用 ， 关键 是 给 我 看 代码 ” (Talk is cheap. Show 
me the code) 。 

假设 把 学 习 TypeScript 当 作 一 次 自驾 游 , 那么 搭建 TypeScript 的 开发 环境 就 相当 于 确定 自 
罗 游 的 代步 工具 。 

获取 TypeScript 开发 工具 有 两 种 主要 方法 : 

@ ”通过 npm 命令 行 安装 。 

@ 通过 安装 TypeScript 的 Visual Studio 插件 。 

下 面 分 别 说 明 这 两 种 方法 的 安装 步骤 。 


呈 壮 


1.3.1 npm 安 斤 

npm 是 JavaScript 常用 的 包 管 理工 具 ， 也 是 Node.js 的 默认 包 管 理工 具 。 通 过 npm 可 以 安 
装 、 共 享 、 分 发 代码 和 管理 项 目 依赖 关系 。 

由 于 TypeScript 需要 通过 npm 安装 ,而 npm 依赖 于 Node,js, 因 此 第 一 步 就 是 先 安装 Nodejs 
环境 。 

1. 安装 Node.js 

(1) Nodejs 发 布 于 2009 年 5 月 ， 由 Ryan Dahl 开发 ， 实 质 是 对 Chrome V8 引擎 进行 封装 。 
可 以 在 https://nodejs.org 官网 上 下 载 最 新 的 版 本 例如 下 载 10.15.1 LTS 版 ) ， 如 图 1.3 所 示 。 


Node.js? is a Javascript runtime built on Chrome's V8 Javascript engine. 


Download for Windows (x64) 


11.10.0 Current 
atest Features 


= OtherDownloads | Changelog | APlpocs 


Or have a lookat the Long Term Support (LTS) schedule. 


Sign up for Node.js Everywhere, the official Nodejs Monthty Newsletter. 


13 Nodejs 下 载 界面 


(2) 如 果 需 要 下 载 之 前 的 版 本 ， 可 以 在 https://nodejs.org/en/download/releases/ 中 下 载 。 这 
里 下 载 Node.js 10.13.0 进行 安装 。 下 载 完成 后 双击 文件 ， 打 开 安 装 界面 ， 如 图 1.4 所 示 。 


基 Nodejs Setup 一 X 


Welcometo the Node.js Setup Wizard 


The Setup Wizard slows you to change the way Node-js 


[a A features are instabed on your computer or to remove tt from 
Your computer. Cick Next to contnue or Cancel to ect the 

人 

JS 


Next Gane 


图 1.4 Nodejs 安装 界面 


(3) 一 般 来 说 ， 按 照 向 导 一 步 一 步 根 据 默 认 配 置 进行 安装 即 可 ， 安 装 完成 后 ， 需 要 验证 
-下 安装 是 否 成 功 。 用 组 合 键 Win+R 打开 Windows 操作 系统 上 的 运行 界面 ， 输 入 “cmd” 后 
按 回 键 车 打开 命令 行 工具 。 


县 演示 环境 的 操作 系统 是 Windows 10 64 位 教育 版 | 


(4) 在 命令 行 工 具 中 输入 “node -v” 和 “npm -v” 查 看 是 否 安装 成 功 ， 如 果 安 装 成 功 就 
会 显示 版 本 号 ， 如 图 1.5 所 示 。 


: C\WINDOWS\system32\cmd.exe 


图 1.5 Nodejs 查看 版 本 界面 
从 图 1.5 可 以 看 出 ，node -v 命令 输出 Node.js 的 版 本 为 10.13.0， 说 明 Node.js 安装 成 功 ， 
且 Nodejs 目录 已 经 注册 到 环境 变量 path 中 。npm 是 随同 Node.js 一 起 安装 的 包 管理 工具 ， 能 
解决 Nodejs 代码 部 署 上 的 很 多 问题 。 


总 npm 的 包 安装 分 为 本 地 安装 (local) 和 全 局 安装 (global) 两 种 ， 从 命令 来 看 ， 差 别 只 是 
[ 有 没有 -g。 例 如 ，npm install express -g 表示 全 局 安装 ， 如 果 不 带 -g 就 表示 本 地 安装 。 


本 地 安装 将 安装 包 放 在 .node_modules 下 (运行 npm 命令 时 所 在 的 目录 ) ， 如 果 没 有 
node_modules 目录 ， 就 会 在 当前 执行 npm 命令 的 目录 下 生成 node_modules 目录 。 本 地 安装 的 
模块 需要 通过 require() 来 引入 。 

全 局 安装 则 将 安装 包 放 在 node 的 安装 目录 下 (window) ， 全 局 安装 的 模块 可 以 直接 在 命 


令 行 里 使 用 。 
2. 使 用 npm 安装 TypeScript 


在 命令 行 工具 界面 中 输入 命令 “npm install -g typescript” 全 局 安装 TypeScript， 稍 等 片刻 ， 
等 待 安装 完成 后 ， 用 命令 tsc -v 查看 其 版 本 号 来 验证 是 否 安装 成 功 ， 如 图 1.6 所 示 。 


| 画 管理 吕 ;: C\WINDOWS\system32\cmd.exe - OO x 


图 1.6 npm 安装 TypeScript 界面 


从 图 1.6 可 以 看 出 ， 当 前 安装 的 TypeScript 版 本 为 3.3.3。 至 此 ，TypeScript 安装 完成 。 


npm 默认 镜像 是 国外 的 地 址 ， 速 度 可 能 会 比较 慢 ， 或 者 无 法 下 载 包 。 建 议 将 包 仓库 地 址 配 | 
I 置 为 国内 镜像 ， 如 npm 淘宝 镜像 。 


修改 npm 的 镜像 如 代码 1-1 所 示 。 
【代码 1-1】 持久 修改 npm 的 镜像 : npm_register.txt 
01 ”// 持 久 使 用 
02 npm config set registry https://registry.npm.taobao.org 


03 ”// 验 证 是 否 成 功 
04 npm config get registry 


1.3.2 Visual Studio 插件 安装 


由 于 TypeScript 语言 是 微软 公司 开发 的 ， 因 此 势必 在 其 IDE Visual Studio 上 进行 集成 。 
Visual Studio 2017 和 Visual Studio 2015 Update 3 默认 包含 TypeScript。 

Visual Studio 是 一 个 完整 的 集成 开发 工具 , 提供 了 一 站 式 开 发 工具 集合 , 能 够 支持 现在 IT 
行业 上 主流 的 编程 语言 。 它 包括 了 整个 软件 生命 周期 中 所 需要 的 大 部 分 工具 ， 如 UML 建 模 工 
具 、 代 码 管理 工具 、 代 码 编辑 和 调试 、 程 序 测试 和 程序 发 布 等 。Visual Studio 所 写 的 目标 代码 
适用 于 微软 支持 的 所 有 平台 。 

Visual Studio 版 本 很 多 ， 其 中 Visual Studio Community 为 社区 版 ， 适 用 于 学 生 、 开 源 和 个 
人 。 该 版 本 有 相对 完备 的 免费 IDE， 可 用 于 开发 Android、iOS、Windows 和 Web 的 应 用 程序 。 
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如 果 在 安装 Visual Studio 的 时 候 未 安装 TypeScript 工 具 ,后 续 仍 可 通过 下 载 插件 TypeScript 
SDK for Visual Studio 进行 安装 。 


1. 安装 TypeScript SDK for Visual Studio 


(1) 打开 Visual Studio 开发 工具 ， 在 菜单 【工具 】 下 单 击 【 扩 展 和 更 新 (U)...】 菜 单项 ， 
界面 如 图 1.7 所 示 。 


工具 (D ， 测 江 (5S) 分析 (N) ”窗口 W) 。 帮助 (H) 
委 取 工具 和 功能 (一 
扩展 和 更 新 (U)- 
"上 ”连接 到 数据 桥 (D)… 
“二 ”连接 到 服务 器 (S) 一 
SQL Server(Q) » 
口 ”代码 片 良 管 理 器 (D… Ctrl+K Ctrl+B 
NuGet 包 管 理 圳 (N) 
创建 GUID(G) 
错误 查找 (KO) 
Spy++(+) 
刁 。 WCF 服务 配置 妨 罚 匡 (W) 
外 部 工具 (E)- 
导入 和 导出 设置 0… 
自 定义 (O-- 
你 运 项 (0).… 


图 1.7 Visual Studio 工具 菜单 界面 


(2) 在 弹出 的 【扩展 和 更 新 界面, 通过 在 右边 的 文本 框 中 输入 typescript 进行 联网 搜索 ， 
找到 对 应 版 本 的 TypeScript SDK for Visual Studio， 这 里 选择 TypeScript 3.3.1 for Visual Studio 
2017， 单 击 【下载 】 按 钮 进行 插件 下 载 ， 如 图 1.8 所 示 。 


扩展 和 更 新 ? 议 
上 已 安装 二 ”排序 依据 :关联 -= typescript x - 
4 图 TypeScript 2.6.2 for Visual Studio 2017 * eg: TypeScript Team 
| UY Typescript iets you write Jovascript the way you really want to. T1931 
Me askin Miata Typescriptis a typsd superset of JavaScript that compiles to plain Jav... by 1 
# 工具 
4 控件 图 Typescript 2.7 for Visual studio 2017 许 旨 信 息 
St SY Typescript iets you write Jovascript the way you really want to. 向 Microsoft 报 和 扩展 
2 ypeScript is a typed superset of JavaScript that compiles to plain Jav... 
Framework 
UightSvitch Typescript 3.3.1 for Visual Studio 2017 
Sharepoint 
Silverlight 
Windows 窗 体 TypeScript 3.1.1 for Visual Studio 2017 计划 实 丢 : 
i TypeScript lets you write JavaScript the way you really want to. 无 
A TypeScript is a typad superset of JavaScript that compiles to plain Jav... HH 
other Typescript 2.8.1 for Visual Studio 2017 无 
TypeScript lets you write JavaScript the way you really want to. 
A Tunesrrint ie a nad reet nf avaCrrint that romrilec tn nlain lav Ne 
ASPNET 四 和 的 无 
更 下 扩展 和 更 新 设置 


图 1.8 ”Visual Studio 扩展 和 更 新 界面 


(3) 下 载 完成 后 ， 双 击 TypeScript SDK.exe 文件 进行 TypeScript 环境 安装 ， 在 弹出 的 安 
装 界面 上 单 击 【Install】 按 钮 完成 安装 ， 如 图 1.9 所 示 。 
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回 Typescript SDK 3.3.1.0 Setup 一 x 


TypeScript SDK 3.3.1.0 


TypeSeript SDK 33.1.0 license terms. 


agreeto the license terms and conditions 


机 ma cos 


1.9 TypeScript SDK 安装 界面 
2. 安装 TypeScript HTML Application Template 


TypeScript SDK 安装 完成 后 ,并 没有 包含 创建 TypeScript 项 目的 模板 ， 因 此 还 需要 通过 扩 
展 和 更 新 界面 安装 TypeScript HTML Application Template 插件 ， 单 击 【 下 载 】 按 钮 进行 联网 
下 载 并 完成 安装 ， 如 图 1.10 所 示 。 


扩展 和 更 新 


? x 
已 袜 凌 E33 typescript X 
隐 RE oo 
rovides static analyais directly in Visual Studio for TypeScript fies (ts 本 
a Wn and sx using TSLint es 
' 
于 件 男 Typescrlpt HT ppllcation Template HR (4 投 时 ) 
UF E jd 琴 瑞 信 息 
ASPNET 4 
Framework 和 库 向 Microsoft 报喜 扩展 
Lightswiteh [J, TypeScript Definition Generator 
a Creates and synchronizes Typescript Definiion files (ds) from C5/VB 
ea ee model classos to build strongly typed web application where the corve.. 
jverlig 
Windows 万 休 网 Typescript 2.6.1 for Visual Studio 2017 i 
es UY typescript ets you write Javascript the way you realy wan to. 无 
本 TypeScriptis a typed superset of javaSecript that compiles to plain Jav... HE 
4 Other Teeseript 2.7.2 for Visual Studio 2017 无 
TypeScript lets you write JavaSeript the wa 
A TereSrrint is = tered mere oh lnvnsrriry HH 
ASPJNET 和 123, 友 
更 故 扩 展 和 更 新 设 置 
ES 


图 1.10 TypeScript HTML Application Template 下 载 界面 


在 弹出 的 【VSIX Installer】 界 面 中 ， 单 击 【修改 】 按 钮 进行 安装 ， 如 图 1.11 所 示 。 


项 vstx Installer x 


Microsoft Visual Studio Community 2017 的 计划 任务 : 
安装 
Typescript HTML Application Template 这 可 还 
数字 答 名 :无 


示 同意 上 述 洗 可 条 款 (0 果 
和 以 及 安装 任何 系统 必 备 组 件 - | 


1.11 TypeScript HTML Application Template 插件 安装 界面 


如 
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至 此 ， 通 过 Visual Studio 安装 TypeScript 相关 插件 来 搭建 开发 环境 就 完成 了 。 


| TypeScript HTML Application Template 插件 在 下 载 完 成 后 ， 需 要 重启 Visual Studio 
才能 安装 。 


1 。 a 开始 第 一 个 TypeScript 文件 


在 TypeScript 开发 环境 搭建 完成 后 , 就 可 以 正式 进入 TypeScript 程序 开发 了 。 本 节 通 过 创 
建 一 个 简单 的 TypeScript 程序 让 读者 首先 从 感性 上 直观 地 了 解 TypeScript 的 编码 、 编 译 和 运行 
基本 过 程 。 

按照 惯例 ， 学 习 一 门 新 的 语言 ， 第 一 个 程序 往往 都 是 HelloWorld。 我 们 也 遵循 这 样 的 习 
惯 ， 定 义 一 个 helloWorld 函数 ， 让 TypeScript 打印 出 “Hello，My First TypeScript”。 


1.4.1 选择 TypeScript 编辑 器 


工 欲 善 其 事 ， 必 先 利 其 器 。 虽 然 可 以 用 任何 文本 编辑 器 进行 TypeScript 程序 的 开发 , 但 是 
借助 强大 的 编辑 器 既 可 以 提高 开发 效率 ， 也 可 以 通过 类 型 检测 等 手段 保证 代码 质量 。 从 
TypeScript 官网 可 以 看 出 编辑 器 还 是 比较 多 的 ， 如 图 1.12 所 示 。 


[< | | Visual Studio 2017 日 Sublime Text @ 
2 | Visual Studio Code 4 Atom 医 Webstorm 
vA Visual Studio 2015 全 Eclipse 侯 Vim 


图 1.12 TypeScript 常用 的 编辑 器 


Visual Studio 2017/2015 安装 所 需 空间 比较 大 ， 比 较 消耗 电脑 资源 ， 我 们 也 可 以 选择 微软 
的 开源 轻 量 级 编辑 器 Visual Studio Code 来 开发 ， 而 且 Visual Studio Code 是 跨 操作 系统 的 ， 不 
但 可 以 在 Window 操作 系统 上 进行 程序 开发 ， 也 可 以 在 Linux 和 Mac 中 进行 开发 。 

微软 在 2015 年 4 月 30 日 的 Build 开发 者 大 会 上 正式 宣布 了 Visual Studio Code 项 目 ， 一 
个 运行 于 Mac OS X、Windows 和 Linux 之 上 的 , 针对 编写 现代 Web 和 云 应 用 的 跨 平台 源 代 码 
编辑 器 。 Visual Studio Code 对 Web 开发 的 支持 尤其 好 , 同时 支持 多 种 主流 语言 , 例如 C#、Java、 
PHP、C++、JavaScript 和 TypeScript 等 。 

在 网 站 https://code.visualstudio.com/download 中 可 以 下 载 安装 文件 ,这 里 下 载 的 是 Window 
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64 位 1.31.1 版本。 下 载 完成 后 双击 VSCodeUserSetup-x64-1.31.1.exe 进行 安装 ,如 图 1.13 所 示 。 


区 = 人 E 序 - Visual sudio Code = x 


欢迎 使 用 Visual Studio Code 安装 向 
导 
这 将 在 计算 机 上 安装 Marosoft Visual Studio Code (User)。 


单 击 下 一 步 也 继续 ， 或 单 击 取消 以 退出 安装 程序 。 


下 3] MA 


图 1.13 Visual Studio Code 安装 界面 


按照 向 导 操作 即 可 ， 最 后 完成 Visual Studio Code 的 安装 。 


| Visual Studio Code 默认 情况 下 是 不 包含 TypeScript 语言 的 ， 但 可 以 通过 安装 插件 来 开发 
Ll TypeScript， 同 时 Visual Studio Code 通过 插件 还 支持 C#、Java 和 PHP 等 语言 。 


对 于 单个 文件 而 言 , 用 在 线 的 编辑 器 进行 编码 会 更 加 方便 , 在 TypeScript 官网 上 有 一 个 练 
习 (Playground) 链接 ， 即 http://www.typescriptlang.org/play/index.html， 具 体 界面 如 图 1.14 所 


不 。 


1 var obj = { 
2 let obj ={ 2 name: "jack”, 
3 name: "jack", 3 age: 22 
a age:22 Ns 
上 5 //JavaScript with 在 TypeScript 中 不 支持 
6 用 6 with (obj) { 
7 7 console,log(name); //"jack" 
8 //Javascript with 在 rypescript 中 不 支持 。 3 console.log(age); //22 
9} 
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With Loh) 
18 console.log(name);//"jack" 
11 console.log(age); //22 
12 } 
13 
14 


图 1.14 在 线 TypeScript Playground 界面 


剖 TypeScript Playground 只 能 编写 单个 文件 。 使 用 它 本 地 无 须 安装 任何 TypeScript 环境 。 | 


由 图 1.14 可 以 看 出 ， 在 左边 的 区 域 是 TypeScript 脚本 ， 其 中 【编译 项 】 按 钮 可 以 配置 一 
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些 编译 选项 。 当 修改 TypeScript 脚本 时 ， 右 边 会 自动 转译 成 对 应 的 JavaScript 代码 。 当 单 击 右 
边 的 【运行 】 按 钮 时 ， 即 可 执行 右边 生成 的 JavaScript 代码 。 

本 书 中 前 几 章 的 演示 代码 只 要 是 单 文件 的 形式 都 可 以 在 TypeScript 官网 上 Playground 提 
供 的 在 线 编辑 器 上 运行 。 


1.4.2 ”编写 TypeScript 文件 


当 Visual Studio Code (VSCode) 完成 安装 后 ， 双 击 桌 面 快 捷 方 式 打开 VSCode 编辑 器 ， 
在 【File】 菜 单 下 单 击 【New File】 创 建 一 个 新 文件 ， 并 保存 为 helloworld.ts。 

TypeScript 编码 有 一 些 指导 规则 , 函数 命名 采用 camelCase 命名 规则 , 也 就 是 首 字母 小 写 、 
其 他 单词 首 字母 大 写 。 文 件 helloworld.ts 的 内 容 如 代码 1-2 所 示 。 


【代码 1-2】 helloWorld 函数 : helloworld.ts 


01 WE 

02 * 第 一 个 TS 程序 (注释 用 于 代码 提示 ) 

03 * @param <msg 字符 串 类 型 > 

04 * @return (字符 串 ) 

05 A 

06 function helloWorld (msg:string):string{ 

07 return "Hello, " + msg; 

08 } 

09 let msg = "My First TypeScript"; 

10 document .body.innerHTML = helloWorld (msg); 


从 上 述 代 码 中 可 以 看 出 ，helloWorld 的 函数 上 用 /**...*/ 写 了 一 段 注释 。TypeDoc 可 以 自 


动 根据 写 在 /** ... */ 之 间 的 注释 生成 api 文档 。 在 Visual Studio Code 中 打开 helloworld.ts， 如 图 
1.15 所 示 。 


3 Ele Edit selection View Go Debug ~ hellowordts-Visualsu.. — 口 x 
TS helloworldts x i 
1 / 
2 * 第 一 个 TS 程 
3 * Bparam <msg 
4 * ereturn( 字 符 囊 ) 
2 =/ 
6 function helloWorld(msg:string):string{ | | 
7 return “Hello, “ + msg; 
3 } 
9 let msg = "My First Typescript"; 
器 16 document .body.innerHTML = helloWorld(msg); 
二 


In10,col47 Spaces4 UTF-8 CRIF Tpesaipt 331 全 Tslint @ 扫 


1.15 ”Visual Studio Code 编辑 界面 
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1.4.3 编译 TypeScript 文件 
前 面 提 到 ，TypeScript 文件 需要 经 过 编译 器 编译 后 转 成 原生 JavaScript 代码 才能 执行 。 因 


此 ， 为 了 运行 helloworld.ts 中 的 代码 ， 需 要 对 helloworld.ts 文件 进行 编译 。 这 里 用 Windows 


命令 行 工具 调用 tsc 命令 编译 helloworld.ts， 命 令 如 下 : 


tsc helloworld.ts 


编译 成 功 后 , 会 在 helloworld.ts 同一 个 目录 下 生成 一 个 helloworldjjs 文件 , 内 容 如 代码 1-3 


所 示 。 
【代码 1-3】 helloworld.ts 编译 后 代码 : helloworld.js 
01 Dk 
02 * 第 一 个 Ts 程序 
03 * @param <msg> 
04 * @return(string) 
05 
06 function helloWorld(msg) { 
07 return "Hello, " + msg; 
08 } 


09 Var msg = "My First TypeScript"; 
10 document .body.innerHTML = helloWorld (msg); 


从 代码 1-3 可 以 看 出 ，TypeScript 代码 和 生成 的 JavaScript 代码 很 相似 。 


二 在 Visual Studio Code 中 需要 经 过 配置 才能 自动 进行 TypeScript 文件 编译 。 


当然 也 可 以 同时 编译 多 个 .ts 文件 ， 语 法 如 下 : 
tsc filel.ts, file2.ts 
tsc 常用 编译 参数 如 表 1.3 所 示 。 
表 1.3 tsc 常用 编译 参数 


编译 参数 参数 说 明 

i 显示 帮助 信息 

--module 载 入 扩展 模块 

--target 设置 ECMA 版 本 ， 如 ES5 

--declaration 额外 生成 一 个 .dts 扩展 名 的 文件 ， 命 令 tsc ts-hw.ts --declaration 会 生成 
ts-hw.d.ts、ts-hw.js 两 个 文件 

--TemoveComments 删除 文件 的 注释 

--out 编译 多 个 文件 并 合并 到 一 个 输出 的 文件 


--sourcemap 生成 一 个 sourcemap (.map) 文 件 。sourcemap 是 一 个 存储 源 代码 与 编译 
代码 对 应 位 置 映射 的 信息 文件 


--module noImplicitAn 在 表达 式 和 声明 上 有 隐 含 的 any 类 型 时 报错 
--watch 在 监视 模式 下 运行 编译 器 ， 会 监视 输出 文件 ， 在 它们 改变 时 重新 编译 
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1.4.4 在 网 页 中 调用 TypeScript 文件 


我 们 编写 的 helloworld.ts 代码 如 何在 浏览 器 里 面 运行 呢 ? 一 般 来 说 , 浏览 器 不 能 直接 嵌入 
TypeScript 文件 ， 而 是 嵌入 TypeScript 文件 编译 后 对 应 的 JavaScript 文件 。 下 面 创建 一 个 
index.html 来 作为 容器 ， 将 编译 好 的 helloworld.js 引入 。index.html 具体 内 容 如 代码 1-4 所 示 。 


【代码 1-4】 调用 helloworld.ts 生成 的 helloworld.js 文件 : index.html 


01 
02 
03 
04 
05 


06 
07 
08 
09 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, 
initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>index</title> 
</head> 
<body> 
< 9 入 文件 => 
<script src="helloworld.js" ></script> 
</body> 
</html> 


用 浏览 器 打开 index.html， 可 以 看 到 页 面 上 打印 出 “Hello,My First TypeScript” 的 文本 信 
息 ， 界 面 如 图 1.16 所 示 。 


口 x 
D index x Be 


CGC 昌文 件 | C/Userwywangmi， 图 妇 日 


Hello, My First TypeScript 


图 1.16 index.html 运行 界面 


虽然 通过 动态 编译 技术 可 以 在 浏览 器 中 直接 岩 入 TypeScript 文件 , 但 是 一 般 不 建议 
这 么 做 。 
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人 Re 大 一 一 和 
1 .DJ Typescript 的 组 成 部 分 ( 语言 、 编 译 器 、 
语言 服务 ) 

TypeScript 整个 体系 组 成 比较 复杂 ， 从 本 质 上 讲 它 主 要 由 以 下 3 个 部 分 构成 : 

@ TypeScript 编译 器 核心 : 包括 语法 、 关 键 字 和 类 型 注释 等 。 

@ ”独立 的 TypeScript 编译 器 (tsc.exe ): 将 TypeScript 编写 的 代码 转换 成 等 效 的 JavaScript 
代码 ， 可 以 通过 参数 动态 生成 ES5 或 者 ES3 等 目标 代码 。 

@ TypeScript 语言 服务 : 在 TypeScript 编译 器 核心 层 上 公开 了 一 个 额外 的 层 ， 是 类 似 编 
辑 器 的 应 用 程序 。 语 言 服务 支持 常见 的 代码 编辑 器 中 需要 的 操作 ， 如 代码 智能 提示 、 
代码 重 构 、 代 码 格式 化 、 代 码 折 登 和 着 色 等 。 

TypeScript 组 成 部 分 的 分 层 示意 如 图 1.17 所 示 。 


独立 的 TypeScript 编 译 器 TypeScript 语 言 服务 


TypeScript 编 译 器 核心 


1.17 TypeScript 的 组 成 分 层 示 意图 


小 结 


本 章 首 先 阐述 了 TypeScript 语言 的 相关 概念 及 其 产生 的 缘由 。TypeScript 作为 JavaScript 
的 超 集 ,提供 了 面向 对 象 和 类 型 检查 等 新 的 特征 ， 可 以 更 好 地 支撑 大 规模 应 用 程序 的 开发 ; 然 
后 阐述 了 与 JavaScript 相 比 TypeScript 语言 的 主要 优势 以 及 我 们 学 习 TypeScript 的 目的 。 接 着 
对 搭建 基本 的 TypeScript 开发 环境 进行 了 详细 说 明 ， 并 在 Visual Studio Code 中 构建 了 第 一 个 
TypeScript 应 用 程序 ， 让 读者 对 TypeScript 从 基本 编码 以 及 用 tsc 命令 进行 编译 到 引入 网 页 运 
行 这 个 过 程 有 了 一 个 感性 认识 。 


第 2 章 
<TypeScript 基 本 语法 > 


上 一 章 主要 对 TypeScript 语言 相关 概念 和 特点 进行 了 概述 ， 并 罗列 了 TypeScript 相 比 于 
JavaScript 而 言 有 哪些 优势 ， 以 及 TypeScript 给 前 端 开发 带 来 的 好 处 。 本 章 将 对 TypeScript 语 
言 的 基本 语法 进行 详细 说 明 。 

学 习 任 何 一 门 编程 语言 ,掌握 其 语言 的 基本 语法 是 后 续 进 行 实战 的 基础 。 通 过 本 章 的 学 习 ， 
读者 可 以 掌握 TypeScript 语言 中 的 基本 语法 , 如 数据 类 型 、 变 量 和 运算 符 。 最 后 对 数字 (数值 ) 
和 字符 串 这 两 种 数据 类 型 的 基本 方法 进行 详细 说 明 。 

本 章 主要 涉及 的 知识 点 有 : 

@ ”类 型 : 学 会 TypeScript 的 基础 类 型 、 枚 举 和 特有 的 类 型 。 

@ 变量 : 学 会 TypeScript 的 变量 声明 以 及 作用 域 等 。 

@ 运算 符 : 学 会 TypeScript 各 类 运算 符 的 语法 ， 如 算术 运算 符 、 逻 辑 运算 符 和 类 型 运算 

符 等 。 
@ 数字: 学 会 TypeScript 语言 中 数字 的 基本 操作 ， 如 数值 对 象 的 属性 和 方法 。 
@ 字符 串 : 学 会 TypeScript 语言 中 字符 串 的 基本 操作 ， 如 字符 串 的 构造 函数 和 方法 。 


性 元 | 本 章 内 容 会 水 及 后 续 章节 才 详细 说 明 的 函数 和 流程 控制 语句 等 内 容 ， 读 者 先 不 必 细 究 。 | 


认识 一 些 编程 语言 的 术语 


TypeScript 是 一 门 计算 机 编程 语言 ， 必 人 然 会 涉及 一 些 编程 方面 的 术语 。 这 些 术 语 会 经 常 在 
后 面 提 及 , 因此 有 必要 对 这 些 术 语 的 基本 概念 做 一 个 说 明 , 如 果 你 之 前 学 过 面向 对 象 或 者 其 他 
语言 ， 可 以 选择 性 地 跳 过 阅读 这 些 概念 。 


2.1.1 标识 符 
在 计算 机 编程 语言 中 , 为 了 便于 记忆 和 理解 ， 使 用 一 个 符合 约定 的 名 字 给 变量 、 常 量 、 函 
数 和 类 等 命名 ， 以 建立 起 名 称 与 实体 之 间 的 映射 关系 ， 这 个 名 字 就 是 标识 符 〈identifier) 。 标 
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识 符 通常 由 字母 和 数字 以 及 其 他 少数 几 个 特有 的 字符 构成 。 
通俗 来 讲 , 标识 符 可 以 理解 为 人 的 姓名 , 往往 我 们 用 一 个 人 的 姓名 来 代表 这 个 人 ， 以 区 分 


不 同 的 人 。 


2.1.2 ”数据 类 型 
数据 类 型 (Data Type) 是 一 种 数据 分 类 ， 


包含 一 组 数据 的 共性 属性 和 方法 总 称 ， 它 告诉 


编译 器 或 解释 器 如 何 使 用 数据 。 数据 类 型 限定 了 开发 人 员 可 以 对 数据 执行 的 操作 、 数 据 的 组 成 


以 及 存储 该 类 型 的 值 的 方式 。 


举例 而 言 , 鸟 和 鱼 可 以 看 成 是 一 种 动物 的 类 型 , 鱼 这 个 类 型 就 限制 了 它 的 数据 组 成 只 能 是 
草鱼 、 链 鱼 和 效 鱼 等 ， 同 时 鱼 这 个 类 型 还 有 一 些 特有 的 行为 ， 如 在 水 中 游 ; 而 鸟 这 个 类 型 限制 
了 它 的 数据 组 成 只 能 是 燕子 、 大 有 奏 和 麻雀 等 , 同时 鸟 这 个 类 型 还 有 一 些 特有 行为 , 如 在 天 上 飞 。 


也 就 是 说 ,只 要 某 个 事物 可 以 归 为 某 类 型 ， 


2.1.3 ”原始 数据 类 型 


那么 它 就 必须 具备 这 个 类 型 的 特有 属性 和 方法 。 


原始 数据 类 型 (Primitive Data Type) 通常 是 内 置 或 基本 的 语言 实现 类 型 。 原 始 数 据 类 型 
一 般 情况 下 与 计算 机 内 存 中 的 对 象 一 一 对 应 ， 但 由 于 语言 及 其 实现 的 不 同 ， 也 可 能 不 一 致 。 但 
是 , 通常 情况 下 对 原始 数据 类 型 的 操作 是 最 快 的。 原始 类 型 基本 上 都 是 值 类 型 , 其 赋值 都 是 在 


内 存 中 复制 的 副本 。 


2.1.4 变量 和 参数 


变量 (Variable) 是 一 个 用 于 保存 值 的 占 位 符 ， 可 以 通过 变量 名 称 来 获得 对 值 的 引用 。 变 
量 一 般 由 变量 名 、 变 量 类 型 和 变量 值 组 成 。 在 计算 机 编程 中 ,变量 或 标量 是 与 关联 的 标识 符 配 
对 的 存储 位 置 ( 由 存储 器 地 址 标识 ) ， 其 包含 值 的 一 些 信息 。 变 量 名 称 是 引用 存储 值 的 常用 方 
法 。 变 量 名 和 变量 值 的 这 种 分 离 结构 允许 在 程序 运行 时 ， 变 量 名 可 以 动态 绑 定 值 ， 换 句 话说 ， 
变量 的 值 可 以 在 程序 执行 过 程 中 改变 。 变 量 名 往往 就 是 一 个 标识 符 ， 命 名 规则 二 者 一 致 。 

参数 通俗 地 讲 就 是 函数 运算 时 需要 参与 运算 的 值 。 参数 虽然 和 变量 比较 类 似 , 但 是 二 者 还 
是 不 同 的 概念 : 参数 一 般 用 于 函数 中 ,变量 既 可 以 在 函数 中 也 可 以 在 其 他 地 方 使 用 ; 参数 一 般 


用 于 传递 值 ， 而 变量 一 般 用 于 存储 值 。 


2.1.5 ”函数 和 方法 


函数 是 一 段 代码 , 通过 函数 名 来 进行 调用 ， 从 而 给 外 界 提供 服务 。 它 能 将 一 些 数据 (参数 ) 


传递 进去 进行 处 理 ， 然 后 返回 一 些 数据 〈 返 回 


值 ) ， 也 可 以 没有 返回 值 。 方 法 也 是 一 段 代 码 ， 


也 通过 方法 名 来 进行 调用 , 但 它 必须 依附 于 一 个 对 象 。 方法 和 函数 形式 上 大 致 是 相同 的 , 但 使 


用 上 存在 差异 。 将 函数 与 某 个 对 象 建立 联系 时 ， 


而 方法 必须 通过 对 象 和 方法 名 来 调用 。 
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函数 就 是 方法 。 函数 可 以 直接 通过 函数 名 调用 ， 
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2.1.6 ”表达 式 和 语句 


表达 式 〈Expression) 是 由 数字 、 运 算 符 、 括 号 、 变 量 名 等 按照 一 定 顺序 组 成 的 且 能 求 得 
值 的 式 子 ， 如 x+(7*y)+2。 表 达 式 本 质 上 是 一 个 值 ， 可 以 当 作 一 个 具体 的 值 使 用 。 因 此 可 以 将 
它 赋 给 变量 ， 也 可 以 当 作 参 数 传递 。 单 独 的 一 个 运算 对 象 ( 常 量 或 变量 ) 也 可 以 叫 作 表达 式 ， 
这 是 最 简单 的 表达 式 。 表 达 式 一 般 只 能 出 现在 赋值 的 右边 ， 而 不 能 是 左边 。 

语句 (Statement) 在 TypeScript 中 是 由 分 号 结尾 的 , 一 条 语句 相当 于 一 个 完整 的 计算 机 指 
令 ， 包 括 声明 语句 、 赋 值 语句 、 函 数 表达 式 语句 、 空 语句 、 复 合 语句 (由 花 括号 {} 括 起 来 的 一 
条 或 多 条 语句 ) 。 二 者 的 区 别 就 是 表达 式 可 以 求 值 ， 但 是 语句 不 可 以 。 


2.1.7 ”字面 量 


字面 量 〈Literal) 是 在 编码 中 表示 一 个 固定 值 的 表示 法 (Notation) 。 几 乎 所 有 计算 机 编 
程 语 言 都 具有 对 基本 值 的 字面 量 表示 , 如 浮 点 数字 符 串 和 布尔 类 型 等 。 字 面 量 也 叫 作 直接 量 。 
例如 ，“Hello World” 就 是 字符 串 字 面 量 ，99.88 就 是 数值 字面 量 ，true 就 是 布尔 字面 量 。 


2.2 认识 Typescript 的 简单 语法 


在 介绍 类 型 的 时 候 会 用 一 些 代码 来 进行 说 明 , 就 必然 涉及 一 些 TypeScript 的 编码 规范 和 基 
本 语法 。 因 此 在 正式 开始 介绍 TypeScript 类 型 之 前 ， 本 节 有 必要 简要 地 介绍 一 下 TypeScript 
的 基本 语法 。 


2.2.1 注释 语法 


为 了 提高 代码 的 可 读 性 , 让 其 他 人 可 以 更 好 地 理解 某 段 代码 的 逻辑 意图 , 必须 在 关键 的 地 
方 对 代码 进行 注释 。 在 TypeScript 语言 中 ,注释 方式 主要 有 3 种 ， 分 别 是 单行 注释 、 多 行 注释 
以 及 用 于 生成 API 文档 的 注释 。3 种 注释 方式 如 下 所 示 : 


01 ”// 当 行 注释 

02 Vi 

03 多 行 注释 

04 可 以 跨行 进行 注释 

05 */ 

06 六 本 

07 * RPI 文档 注释 ， 可 以 供 TypeDoc 工具 识别 生成 API 说 明文 档 
08 */ 


可 以 看 出 ，/… 表示 单行 注释 ，/* … */ 用 于 多 行 注释 ， 而 /**...*/ 用 于 自动 生成 API 说 
明文 档 的 注释 。 API 文档 注释 一 般 用 于 函数 上 ,用 来 说 明 函 数 中 参数 的 类 型 及 参数 的 具体 含义 ， 
同时 说 明 函 数 的 返回 值 。 


Ee 
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通俗 来 讲 ， 注 释 是 给 人 阅读 的 ，TypeScript 编译 器 并 不 会 去 解析 它 。 一 般 情况 下 ， 当 脚本 
文件 发 布 到 生产 环境 下 后 , 会 利用 工具 对 代码 进行 混淆 和 压缩 , 这 个 过 程 中 就 将 注释 进行 了 删 
除 ， 从 而 减少 文件 大 小 ， 且 增加 了 被 阅读 的 难度 。 


2.2.2 ”区 分 大 小 写 

TypeScript 是 区 分 大 小 写 的 ， 变 量 名 someThing 和 something 是 不 同 的 。 因 此 在 编码 的 时 
候 一 定 要 注意 。 
2.2.3 保留 字 


TypeScript 中 有 很 多 内 置 的 类 型 和 对 象 等 ， 从 而 占用 了 一 些 标识 符 ， 这 些 用 于 系统 的 特殊 
标识 符 为 语言 的 保留 字 ， 不 能 用 于 变量 的 命名 〈 标 识 符 ) 。 例 如 ， 下 面 的 关键 词 是 保留 字 ， 是 


不 能 用 作 标识 符 的 : 
break case catch class 
const continue debugger default 
delete do else enum 
export extends false finally 
for function if import 
in instanceof new null 
return super switch this 
throw true try typeof 
var void while with 


下 面 的 关键 词 不 能 用 于 用 户 定义 的 类 型 名 称 ， 这 些 是 TypeScript 内 置 的 类 型 : 


any boolean number string 
Symbol 
下 面 的 关键 词 在 特定 上 下 文中 有 特殊 意义 ， 虽 然 是 合法 的 标识 符 , 但 是 为 了 防止 歧义 , 不 

建议 使 用 : 

abstract as async await 

constructor declare from get 

is module namespace of 

require set type 


2.2.4 语句 用 ;分 隔 


两 个 语句 之 间 若 处 于 同一 行 ， 中 间 必 须 用 英文 分 号 〈;) 进行 分 隔 。 每 行 末 尾 可 以 省 略 ; 
但 是 不 建议 这 样 操作 , 因为 在 压缩 代码 的 时 候 会 压缩 到 一 行 上 , 这 样 没有 分 隔 的 两 个 语句 可 能 
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会 出 现 错误 。 


| TypeScript 编译 成 JavaScript 的 时 候 会 在 没有 分 号 的 行 末 自 动 加 上 “;”。 例如 ，“letb=3” 
| 会 编译 为 “varb=3;”。 


2.2.5 文件 扩展 名 为 .ts 
TypeScript 脚本 文件 的 扩展 名 为 .ts。 


2.2.6 ”变量 声明 

TypeScript 可 以 用 let 和 var 声明 一 个 变量 (变量 的 声明 将 在 第 3 章 详细 介绍 ) ， 声 明 变 
量 的 语法 为 : 

let 或 var 变量 名 : 数据 类 型 = 初始 化 值 ; 

例如 : 


let varName : string = "hello world" ; 


蕊 变量 名 必须 遵循 一 定 的 命名 规范 ， 例 如 不 多 许 用 数字 打头 等 。 | 


2.2.7 异常 处 理 

在 TypeScript 中 ， 可 以 用 throw 关键 字 抛 出 一 个 异常 。 在 JavaScript 中 ，throw 可 以 抛 出 
任何 类 型 的 异常 。 但 是 在 TypeScript 中 ，throw 抛 出 的 必须 是 一 个 Error 对 象 ， 如 下 所 示 。 

throw new Error (" 错 误 信息 ") ; 

要 自 定义 异常 ， 可 以 继承 Error 类 。 当 需要 一 个 特定 的 异常 行为 或 者 希望 catch 块 可 以 分 
辨 异常 类 型 时 ， 自 定义 异常 就 会 很 有 用 。 处 理 异常 需要 使 用 try … catch 语句 块 。 大 体 上 和 C# 
的 使 用 方法 类 似 。 下 面 的 代码 2-1 给 出 一 段 try … catch 的 示例 代码 ， 此 代码 并 不 具有 什么 实际 
意义 ， 只 是 为 了 演示 而 已 。 


【代码 2-1】 try .… catch 示例 : try_catch.ts 


01 Ey 

02 let a = b / 0; // b 未 定义 

03 } 

04 catch (error) { 

05 switch (error.name) { 

06 case "errorone': { 

07 console.1og (error.message) 
08 break; 
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09 1 

10 case "errorTwo': { 

LE console.log (error.message) 
12 break; 

3 } 

14 default: { 

15 throw new Error ("异常 :"+error); 
16 } 

hy } 

18 } 

19 finally { 

20 console.1o0g ("执行 结束 ") ; 

作业 ¥ 


| TypeScript 不 支持 多 个 catch 块 ， 只 能 在 一 个 catch 中 通过 switch 来 区 分 不 同 的 异常 类 型 ， 
[ 进而 进行 差异 化 处 理 。 


在 很 多 语言 中 ， 任 何 数值 除 以 0 都 会 导致 错误 而 终止 程序 执行 。 但 是 在 TypeScript (和 
JavaScript 一 致 ) 中 ， 会 返回 特殊 的 值 ， 比 0 大 的 数 除 以 0 则 会 得 到 无 穷 大 Infinity， 而 0/0 则 
返回 NaN， 从 而 不 会 影响 程序 的 执行 。 


2 .3 类 型 


TypeScript 可 以 说 是 一 门 具有 面向 对 象 特征 的 静态 类 型 语言 , 可 以 用 来 描述 现实 世界 中 的 
对 象 。 不 同 的 对 象 具有 不 同 的 属性 和 行为 。 一 般 来 说 , 现实 中 的 某 个 事物 具有 不 同类 型 的 属性 ， 
以 人 这 个 对 象 为 例 ， 有 身高 属性 、 名 字 属 性 、 性 别 属 性 和 是 否 结婚 等 属性 ， 这 些 属 性 的 值 分 别 
是 数值 型 、 字 符 型 、 枚 举 型 和 布尔 型 。 


TypeScript 语言 的 静态 类 型 系统 (Type System) 在 程序 编译 阶段 就 可 以 检查 类 型 的 有 效 性 ， 
这 可 以 确保 代码 按 预 期 运行 。 


编程 语言 若 没有 类 型 ， 则 无 法 确切 描述 现实 对 象 ， 也 就 失去 了 编程 语言 的 价值 。 因 此 ， 类 
型 对 于 任何 一 门 语言 而 言 都 是 核心 基础 。 TypeScript 中 的 所 有 类 型 都 是 any 类 型 的 子 类 型 。any 
类 型 可 以 表示 任何 值 。 根 据 官方 的 《TypeScript Language Specification》 文 档 描述 ，TypeScript 
数据 类 型 除了 any 类 型 外 ， 其 他 的 可 以 分 类 为 原始 类 型 (primitive types) 、 对 象 类 型 (object 
types)、 联 合 类 型 (union types)、 交 叉 类 型 (intersection types) 和 类 型 参数 (type parameters) 。 
另外 , 数据 类 型 又 可 以 分 为 内 置 类 型 (如 数值 类 型 ) 和 用 户 自 定义 类 型 (如 枚 举 类 型 和 类 等 ) 。 
本 节 介 绍 TypeScript 语言 的 一 些 常用 类 型 。 


24 


第 2 章 TypeScript 基本 语法 
2.3.1 基础 类 型 


TypeScript 的 原始 类 型 (primitive types) 有 数值 型 (number) 、 布 尔 型 (boolean) 、 字 符 
型 (string) 、 符 号 型 (symbol) 、void 型 、null 型 、undefined 型 和 用 户 自 定义 的 枚 举 类 型 8 
种 。 本 小 节 重 点 对 数值 型 、 布 尔 型 和 字符 型 这 些 基 础 类 型 进行 盖 述 。 

1. 数值 型 

TypeScript 中 的 数值 型 和 JavaScript 一 样 ， 是 双 精 度 64 位 浮 点 值 。 它 可 以 用 来 表示 整数 和 
分 数 ， 在 TypeScript 中 并 没有 整数 型 。 注 意 ， 在 有 些 金融 计算 领域 ， 如 果 对 于 精度 要 求 较 高 ， 
就 需要 注意 计算 误差 的 问题 。 

一 般 来 说 ， 判 定 一 个 变量 是 否 需 要 设置 成 数值 类 型 ， 可 以 看 它 是 否 需要 进行 四 则 运算 ， 如 
果 一 个 变量 可 以 加 减 乘除 ， 那 么 这 个 变量 很 可 能 就 是 数值 类 型 ， 如 金额 。 

数值 类 型 的 变量 可 以 存储 不 同 进 制 的 数值 ， 默 认 是 十 进 制 ， 也 可 以 用 0b 表示 二 进 制 、0o 
表示 八进制 、0x 表示 十 六 进 制 。 

下 面 给 出 几 种 TypeScript 中 数值 型 变量 常见 的 声明 语法 ， 示 例如 代码 2-2 所 示 。 


【代码 2-2】 数值 类 型 声明 示例 : numbers.ts 


01 let numl: number = 89.2 ; // 分 数 ， 十 进 制 
02 let int2 : number = 2 ; // 整 数 ， 十 进 制 
03 let binaryVar: number = 0b1010; // 二 进 制 

04 let octalVar: number = 00744; // 八 进 制 

05 let hexVar: number = 0xf00d; // 十 六 进 制 


醒 变量 声明 数值 类 型 后 ， 不 多 许 将 字符 类 型 或 布 尔 类 型 等 不 妆容 关 型 赋值 给 此 变量 。 | 


01 行 用 “let numl: number” 声 明了 一 个 名 为 numl 的 数值 (number ) 类 型 变量 。 然 后 用 
= 对 变量 numl 进行 初始 化 ， 初 始 值 为 89.2， 这 个 值 并 没有 加 前 级 ， 因 此 默认 是 十 进 制 的 。 这 
是 最 常用 的 一 种 数值 进 制 。 

另外 需要 注意 的 是 ，TypeScript 中 有 Number 和 number 两 种 类 型 ， 但 是 它们 是 不 一 样 的 ， 
Number 是 number 类 型 的 封装 对 象 。Number 对 象 的 值 是 number 类 型 。 

2. 布尔 型 

布尔 型 数据 表示 J 逻辑 值 ， 值 只 能 是 true 或 false。 布 尔 值 是 最 基础 的 数据 类 型 ， 在 
TypeScript 中 ， 使 用 boolean 关键 词 来 定义 布尔 类 型 ， 示 例如 代码 2-3 所 示 。 
【代码 2-3】 布尔 类 型 声明 示例 : boolean.ts 


01 let isMan: boolean = true 7 
02 1let isBoy : boolean = false 7 


01 行 用 “let isMan: boolean” 声 明了 一 个 名 为 isMan 的 布尔 (boolean ) 类 型 变量 。 然 后 
用 = 对 变量 isMan 进行 初始 化 , 初始 值 为 true, 这 个 值 只 能 是 true 或 false, 不 能 是 1 或 者 0 等 。 


25 


TypeScript 实战 


另外 需要 注意 的 是 ，TypeScript 中 有 Boolean 和 boolean 两 种 类 型 ， 但 是 它们 是 不 一 样 的 ， 
Boolean 是 boolean 类 型 的 封装 对 象 ，Boolean 对 象 的 值 是 boolean 类 型 。 从 下 面 给 出 的 示例 代 
码 2-4 可 以 看 出 ， 二 者 是 存在 差异 的 。 


【代码 2-4】 布尔 类 型 示例 : boolean2.ts 


i 


01 
02 


let a : boolean = new Boolean(1) ; // 错 误 
let b : boolean = Boolean(1) ; // 正 确 


从 代码 2-4 可 以 看 出 ,在 TypeScript 中 ，boolean 类 型 和 new Boolean(1) 是 不 兼容 的 。 但 
是 和 直接 调用 Boolean(1) 是 兼容 的 。 


| 在 TypeScript 中 ，Number、String 和 Boolean 分 别 是 number、string 和 boolean 的 封装 


2 ] 


3. 字符 型 
字符 型 (字符 串 类 型 ) 表示 Unicode 字符 序列 ， 可 以 用 单 引 号 ' 或 者 双 引 号 " 来 表示 字符 。 
不 过 一 般 建议 用 双 引 号 来 表示 字符 。 二 者 可 以 互相 嵌 套 使 用 。\ 符号 可 以 对 " 等 进行 转 义 。 
从 下 面 给 出 的 示例 代码 2-5 可 以 看 出 ， 单 引号 ' 或 者 双 引 号 " 都 可 以 给 字符 类 型 的 变量 进行 
赋值 。 
【代码 2-5】 字符 类 型 示例 : string.ts 


01 
02 
03 
04 
05 


let msg: String= " hello world "7 
let msg2: string= ' hello world '; 
let a = "I'M ok" ; 

let b = 'hello "world" '; 

let C= "\"helo\"™ } 


模板 字符 串 (template string) 是 增强 版 的 字符 串 ， 用 反 引 号 “ 标识。 它 可 以 当 作 普通 字 
符 串 使 用 ， 也 可 以 用 来 定义 多 行 字符 串 ， 或 者 在 字符 串 中 嵌入 变量 。 

下 面 的 代码 2-6 给 出 了 模板 字符 串 示 例 。 使 用 模板 字符 串 的 一 个 最 大 好 处 就 是 可 以 防止 传 
统 的 变量 和 字符 通过 + 进行 拼接 的 时 候 单 引号 和 双 引 号 相互 嵌 套 所 导致 的 不 容易 发 现 拼接 错 
误 的 问题 。 

【代码 2-6】 模板 字符 串 示 例 : string_template.ts 
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01 
02 
03 
04 
05 
06 


let name: string = "JackYunDi"; 
let age: number = 27 
let msg: string = ' 今 年 ${name} 已 经 GS{age} 岁 了 ';// 今 年 JackYunDi 已 经 2 岁 了 
Tet Db = 
hello typescript 
hello world 


第 2 章 TypeScript 基本 语法 


Om 


必 寺 | 字符 串 可 以 通过 索引 来 获取 值 中 对 应 的 字符 ， 如 "hello"[0] 答 出 h。 | 


另外 ， 字 符 串 可 以 通过 + 进行 字符 拼接 ， 这 个 操作 在 日 常 的 编程 实战 中 也 是 非常 常见 的 用 
法 。 代 码 2-7 给 出 了 字符 串 拼 接 示 例 。 


【代码 2-7】 字符 串 + 拼 接 示 例 : string_join.ts 


01 let firstName: string = "Jack"; 
02 let lastName: string = "Wang"; 
03 let fullName = firstName + " " + lastName; 
04 console.log (fullName); //Jack Wang 


如 果 字 符 串 和 数字 用 + 字符 连接 ， 那 么 结果 将 成 为 字符 串 。 因 此 可 以 将 空 字符 串 和 数值 相 
加 用 于 将 数值 类 型 转化 成 字符 类 型 ， 如 代码 2-8 所 示 。 
【代码 2-8】 字符 串 和 数字 拼接 示例 : string_join2.ts 

01 let res = "" 十 57 

02 console.log(res ); WS 

另外 ， 字 符 串 和 布尔 型 用 + 进行 拼接 ， 也 生成 字符 串 ， 如 true +"" 的 值 为 "true”。 

如 果 字 符 串 和 数组 用 + 字符 连接 ， 那 么 结果 将 成 为 字符 串 。 因 此 可 以 将 空 字符 串 和 数组 相 
加 用 于 将 数值 的 值 转 成 用 〈,) 分 隔 的 一 个 字符 串 ， 如 代码 2-9 所 示 。 
【代码 2-9】 字符 串 和 数组 拼接 示例 : string_join3.ts 


01 Let res' 二 + [lr2r317 
02 console.log (res );//"1,2,3" 


2.3.2 枚 举 

TypeScript 语言 支持 枚 举 (enum) 类 型 。 枚 举 类 型 是 对 JavaScript 标准 数据 类 型 的 一 个 补 
充 。 枚 举 用 于 取 值 被 限定 在 一 定 范围 内 的 场景 ， 比 如 一 周 只 能 有 7 天， 彩虹 的 颜色 限定 为 赤 、 
梅 、 黄 、 绿 、 青 、 蓝 、 紫 ， 这 些 都 适合 用 枚 举 来 表示 。 

TypeScript 可 以 像 C# 语 言 一 样 ， 可 以 使 用 枚 举 类 型 为 一 组 数值 赋予 更 加 友好 的 名 称 ， 从 
而 提升 代码 的 可 读 性 ， 枚 举 使 用 enum 关键 字 来 定义 ， 代 码 2-10 给 出 了 枚 举 的 示例 。 
【代码 2-10】 枚 举 示 例 : enums.ts 


01 enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; 


02 let today: Days = Days.Sun7 


在 代码 2-10 中 , 01 行 用 enum 关键 词 声明 了 一 个 名 为 Days 的 枚 举 类 型 ， 一般 枚 举 类 型 的 
标识 符 首 字母 大 写 。02 行 用 自 定义 的 枚 举 类 型 来 声明 一 个 新 的 变量 today, 并 赋值 为 Days.Sun 。 
使 用 枚 举 可 以 限定 我 们 的 赋值 范围 ， 防 止 赋值 错误 ， 例 如 不 能 为 today 变量 赋值 为 
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Days.OneDay 。 


必 导 一 般 情 况 下 ， 枚 举 类 型 的 变量 本 质 上 只 是 数值 。Days.Sun 实际 上 是 0。 “let today: Days= 


2 ;” 也 没有 语法 错误 。 


默认 情况 下 , 枚 举 中 的 元 素 从 0 开始 编号 。 同 时 也 会 对 枚 举 值 到 枚 举 名 进行 反 向 映射 。 代 


码 2-11 给 出 了 枚 举 值 和 枚 举 名 之 间 的 映射 关系 用 法 。 
【代码 2-11】 枚 举 值 和 枚 举 名 映射 示例 : enums2.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


可 以 根据 实际 情况 ,手动 指定 成 员 的 索引 数值 (一般 为 整数 , 但 是 也 可 以 是 小 数 或 负数 ) 。 
例如 ， 可 以 将 上 面 的 例子 改 成 从 1 开始 编号 ， 枚 举 支 持 连 续 编号 和 不 连续 编号 ， 也 支持 部 分 编 


enum Days {Sun, Mon, Tue, Wed, Thu, Fri, 


console. 
console. 
console. 
console. 
console. 
console. 
console. 


console. 


console 


log(Days["Sun"] 
log (Days["Mon"] 
log(Days["Tue"] 


log(Days["Wed"] = 


log(Days["Sat"] 
log(Days[0] === 
log (Days[1] 
log (Days [2] 


.log(Days[6] === 


号 和 部 分 不 编号 ， 如 代码 2-12 所 示 。 


【代码 2-12】 枚 举 索引 编号 示例 : enums3.ts 


01 
02 
03 
04 
05 


enum Days {Sun = 1, Mon = 2, Tue 
console. 
console. 
console. 
console. 
console. 
console. 
console. 


log (Days["Sun"] 


log(Days["Mon"] = 


0); 


i 


2); 
3); 
6) 7 


"Sun™)y 
"Mon"); 
"Tue")7 
"Sat"); 


log(Days["Tue"] === 


log (Days["Wed"] 
log (Days["Thu"] 


log(Days["Fri"] === 


log(Days["Sat"] =: 


1); 
2); 
A 
3); 
5); 
6); 
7); 


// 


1 
1 


=4，med=3，Thu =5, Fri, Sat}; 


/站 
// 
Ey 
// 
// 
a 


Sat}; 
true 
true 
true 
true 
true 
true 
true 
true 


true 


true 
true 
true 
true 
true 
true 
true 


给 枚 举 类 型 进行 手动 赋值 时 ,一 定 要 注意 手动 编号 和 自动 编号 不 要 重复 ,否则 会 相互 覆盖 。 


枚 举 手 动 编号 和 自动 编号 如 果 出 现 重复 , 那么 重复 的 枚 举 名 会 指向 同一 个 值 , 而 这 个 数值 
最 后 一 个 赋值 的 枚 举 名 。TypeScript 编译 器 并 不 会 提示 错误 或 警告 。 这 种 情况 如 代码 


只 会 返 


日 


2-13 所 示 。 


【代码 2-13】 枚 举 索引 编号 示例 : enums4.ts 


01 
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enum Days {Sun = 1, Mon = 2, Tue =4, Wed=3, Thu , Fri, 
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02 console.log(Days["Sun"] === 1); // true 
03 console.log(Days["Mon"] === 2); // true 
04 console.log(Days["Tue"] === 4); // true 
05 console.log (Days.Tue); // 4 
06 console.log (Days.Thu); // 4 
07 console.1log (Days.Fri); ht 
08 console.log (Days.Sat); 6 
09 console.1log (Days[4]); /Th 


在 代码 2-13 的 例子 中 ，Wed = 3 后 ， 并 未 手动 进行 编号 ， 系 统 自动 编号 为 递增 编号 ， 即 
Thu 是 4、Fri 是 5、Sat 是 6。 但 是 TypeScript 并 没有 报错 ， 导 致 Days[4] 的 值 先是 Tue 而 后 
又 被 Thu 覆盖 了 。 因 此 Days[4] 的 值 为 Thu。 

通常 情况 下 , 枚 举 名 的 赋值 一 般 为 数值 , 但 是 手动 赋值 的 枚 举 名 可 以 不 是 数字 , 如 字符 串 。 
此 时 需要 使 用 类 型 断言 〈 这 部 分 内 容 将 在 后 续 章节 进行 说 明 ) 来 让 tsc 无 视 类 型 检查 。 代 码 
2-14 演示 了 枚 举 索引 用 字符 串 进行 编号 。 

【代码 2-14】 枚 举 索引 编号 示例 : enums5.ts 


01 enum Days {Sun = <any>"S", Mon = 2，Tue= 4, Wed ，Thu , Fri, Sat}; 


02 console.log(Days["Sun"] === <any>"S"); // true 
03 console.1og(Days ["Mon"] === 2); // true 
04 console.log(Days["Tue"] === 4); // true 
05 console.1log(Days["S"]) //Sun 


另外 ， 在 声明 枚 举 类 型 时 ， 可 以 在 关键 词 enum 前 加 上 const 来 限定 此 枚 举 是 一 个 常数 枚 
举 。 常 数 枚 举 的 示例 见 代 码 2-15 所 示 。 


【代码 2-15】 常数 枚 举 示 例 : enums6.ts 


01 const enum Directions { 


02 Up, 
03 Down, 
04 Left, 
05 Right 
06 . 


07 let directions: Directions = Directions.Up; 
08 console.log (directions); 0 


常数 枚 举 与 普通 枚 举 的 区 别 是 ， 它 会 在 编译 阶段 被 删除 。 代 码 2-15 如 果 用 tsc 编译 成 
JavaScript， 内 容 如 代码 2-16 所 示 。 


【代码 2-16】 常数 枚 举 编译 JavaScript 示例 : enums6.js 


01 Var directions = 0 /* UP */; 


02 console.log (directions); 


代码 2-15 如 果 去 掉 const 关键 词 ， 用 tsc 编译 成 JavaScript， 内 容 如 代码 2-17 所 示 。 
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【代码 2-17】 普通 枚 举 编译 JavaScript 示例 : enums6_2.js 


01 Var Directions; 

02 (function (Directions) { 

03 Directions [Directions["Up"] = 0] = "Up"; 

04 Directions [Directions ["Down"] = 1] = "Down"™; 
05 Directions [Directions ["Left"] = 2] = "Left"; 
06 Directions [Directions ["Right"] = 3] = "Right"; 
07 }) (Directions || (Directions = {})); 


08 var directions = Directions.Up; 


09 console.log (directions); 
外 部 枚 举 (Ambient Enums) 是 使 用 declare enum 定义 的 枚 举 类 型 ，declare 定义 的 类 型 


只 会 用 于 编译 时 的 检查 ， 编 译 成 JavaScript 后 会 被 删除 。 因 此 ， 外 部 枚 举 与 声明 语句 一 样 ， 常 
出 现在 声明 文件 (关于 声明 文件 将 在 后 续 章节 进行 详细 说 明 〉 中 。 外 部 枚 举 示例 如 代码 2-18 


所 示 。 

【代码 2-18】 外 部 枚 举 示例 : enums7.ts 
01 declare enum Directions { 
02 UP， 
03 Downy 
04 Left, 
05 Right 
06 1 


07 let directions : Directions = Directions.Up; 
08 console.log (directions); 


将 代码 2-18 中 的 代码 编译 成 JavaScript 代码 ， 内 容 如 代码 2-19 所 示 。 
【代码 2-19】 外 部 枚 举 编译 成 JavaScript 示例 : enums7.js 


01 var directions = Directions.Up; //Directions 未 定义 
02 console.log (directions); 


从 代码 2-19 可 以 看 出 ,外 部 枚 举 定义 的 枚 举 在 生成 JavaScript 的 时 候 会 整 段 进行 自动 删除 ， 
\ 从 而 出 现 Directions 未 定义 的 情况 。 


2.3.3 任意 值 

TypeScript 语言 是 一 种 静态 类 型 的 JavaScript， 可 以 更 好 地 进行 编译 检查 和 代码 分 析 等 ， 但 
有 些 时 候 TypeScript 需要 和 JavaScript 库 进行 交互 ， 这 时 就 需要 任意 值 (any) 类 型 。 

在 某 些 情况 下 , 编程 阶段 还 不 清楚 要 声明 的 变量 是 什么 类 型 , 这 些 值 可 能 来 自 于 动态 的 内 
容 ， 比 如 来 自用 户 输入 或 第 三 方 代码 库 。 这 种 情况 下 , 我 们 不 希望 类 型 检查 器 对 这 些 值 进行 检 
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查 ， 此 时 可 以 声明 一 个 任意 值 类 型 的 变量 。 任 意 值 类 型 示例 如 代码 2-20 所 示 。 
【代码 2-20】 任意 值 示例 : any.ts 


01 let myVar: any = 77 
02 myVar= "maybe a string instead"; 


03 myVar= false; 


从 代码 2-20 可 以 看 出 ,任意 值 变量 myVar 初始化 值 为 数值 7, 然后 对 其 赋值 字符 串 "maybe 
a string instead" 和 布尔 值 false， 都 可 以 编译 通过 。 

由 于 任意 值 类 型 允许 我 们 在 编译 时 可 选择 地 包含 或 移 除 类 型 检查 , 因此 在 对 现 有 代码 进行 
改写 的 时 候 ， 任 意 值 类 型 是 十 分 有 用 的 。 但 是 由 于 any 类 型 不 让 编译 器 进行 类 型 检查 ， 一 般 尽 
量 不 使 用 ， 除 非 必须 使 用 它 才 能 解决 问题 。 


any 类 型 上 没有 任何 内 置 的 属性 和 方法 可 以 被 调用 ， 它 只 能 在 运行 时 检测 该 属性 或 方法 是 
四 否 存在 。 因 此 声明 一 个 变量 为 任意 值 之 后 ， 编 译 器 无 法 帮助 你 进行 类 型 检测 和 代码 提示 。 


任意 值 类 型 和 Object 看 起 来 有 相似 的 作用 ， 但 是 Object 类 型 的 变量 只 是 允许 你 给 它 赋 不 
同类 型 的 值 , 但 是 却 不 能 够 在 它 上 面 调 用 可 能 存在 的 方法 , 即便 它 真 的 有 这 些 方法 。 代码 2-21 
给 出 了 对 比 二 者 的 示例 。 

【代码 2-21】 any 和 Object 对 比 示例 : any_Object.ts 


01 let notSure: any = 4; 


02 notSure.ifItExists(); // ifItExist 方法 在 运行 时 可 能 存在 

03 notSure.toFixed(); // toFixed 是 数值 4 的 方法 

04 let prettySure: Object = 4; // 此 处 是 大 写 的 object， 不 是 小 写 的 object 
05 prettySure.toFixed(); // 错误 Object 类 型 没有 toFixed 方法 


从 代码 2-21 可 以 看 出 ，any 类 型 的 变量 可 以 调用 任何 方法 和 属性 ， 但 是 Object 类 型 的 变 
量 却 不 允许 调用 此 类 型 之 外 的 任何 属性 和 方法 ， 即 使 Object 对 象 有 这 个 属性 或 方法 也 不 允许 。 


| 代码 2-21 中 02 行 在 编码 阶段 是 没有 错误 的 ， 但 是 当 编 译 成 JavaScript 运行 时 ， 就 会 报 
PP- ftExists 方法 不 存在 的 错误 。 


另外 ， 当 只 知道 一 部 分 数据 的 类 型 时 ，any 类 型 也 是 有 用 的 。 比 如 ， 你 有 一 个 列表 ， 它 包 
含 了 不 同类 型 的 数据 ， 那 么 我 可 以 用 任意 值 数组 来 进行 存储 ， 如 代码 2-22 所 示 。 
【代码 2-22】 any 数组 示例 : any_array.ts 


01 Net Tist: anyl] = [ly true, "free"]y 
02 list[1] = 1007 


二 变量 如 果 在 声明 的 时 候 未 明确 指定 其 类 型 且 未 冉 值 ， 那 么 它 会 被 识别 为 任意 值 类 型 。 ”| 
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TypeScript 会 在 没有 明确 地 指定 类 型 的 时 候 推测 出 一 个 类 型 , 这 就 是 类 型 推论 。 如 果 定 义 
的 时 候 没 有 赋值 ， 不 管 之 后 有 没有 赋值 ， 都 会 被 推断 成 any 类 型 而 完全 不 被 编译 器 进行 类 型 
检查 ， 如 代码 2-23 所 示 。 
【代码 2-23】 any 类 型 推论 示例 : any_infer.ts 


01 let some; //any 类 型 
02 some = 'Seven'; 


03 some = 77 
04 Some .getName () 7 


在 代码 2-23 中 ，01 行 只 是 声明 了 一 个 变量 some， 但 是 并 未 明确 指定 其 类 型 ， 也 没有 赋 
值 ， 因 此 变量 some 会 被 推断 为 any 类 型 。 


2.3.4 空 值 、Null 与 Undefined 

这 里 将 空 值 (void) 、Null 与 Undefined 放 在 一 起 来 介绍 ， 主 要 是 由 于 它们 有 容易 混淆 的 
地 方 。 下 面 将 依次 对 void、Nnull 与 Undefined 类 型 进行 详细 说 明 。 

1. 空 值 

空 值 (void) 表示 不 返回 任何 值 ， 一 般 在 函数 返回 类 型 上 使 用 ， 以 表示 没有 返回 值 的 函数 。 

JavaScript 没有 空 值 类 型 ,在 TypeScript 中 , 可 以 用 void 关键 词 表示 没有 任何 返回 值 的 函数 ， 
如 代码 2-24 所 示 。 
【代码 2-24】 void 函数 示例 : void_func.ts 


01 function hello():void{ 
02 console.10g ("void 类型")，; 
O30 


void 一 般 都 可 以 省 略 ， 从 而 简化 代码 。 声 明 一 个 void 类 型 的 变量 没有 什么 实际 用 途 ， 因 
为 你 只 能 将 它 赋值 为 undefined 和 null。 而 且 一 个 void 类 型 的 变量 也 不 能 赋值 到 其 他 类 型 上 
(除了 any 类 型 以 外 ) ， 如 代码 2-25 所 示 。 

【代码 2-25】 void 变量 示例 : void_var.ts 


01 let vu: void = null; 
02 let vu2: void =undefined; 


03 let num: number = vu; // 错误 , 不 能 将 void 赋值 到 number 
04 let num2: any= vu; // 正确 
2. null 


null 表示 不 存在 对 象 值 。 在 TypeScript 中 ,可 以 使 用 null 关键 词 来 定义 一 个 原始 数据 类 
型 ， 但 要 注意 这 本 身 没有 实际 意义 。null 一 般 当 作 值 来 用 ， 而 不 是 当 作 类 型 来 用 。 


let n: null = null; // 无 意义 
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null 类 型 的 变量 可 以 被 赋值 为 null 或 undefined 或 any， 其 他 值 不 能 对 其 进行 赋值 。 代 码 
2-26 给 出 了 null 类 型 的 变量 用 法 。 
【代码 2-26】 null 变量 示例 : null_var.ts 


01 let uv: null = null; 
02 let uv2: null = undefined; 


03 let uv3: null = 2; // 错 误 
04 let a:any = 2 : 

05 v= a 

06 console.1o0g(a); VA 


从 代码 2-26 可 以 看 出 ，null 既 可 以 是 数据 类 型 也 可 以 是 值 。null 类 型 的 变量 不 能 将 数值 2 
赋值 给 它 ， 但 是 可 以 赋值 any 类 型 的 变量 ， 而 any 类 型 的 变量 可 以 赋值 为 2。 因 此 上 述 的 06 
行 输出 2。 

3. undefined 


undefined 表示 变量 已 经 声明 但 是 尚未 初始 化 变量 的 值 。 undefined 和 null 是 所 有 类 型 的 子 
类 型 。 也 就 是 说 undefined 和 null 类 型 的 变量 可 以 赋值 给 所 有 类 型 的 变量 。 和 null 一 样 ， 在 
TypeScript 中 可 以 使 用 undefined 来 定义 一 个 原始 数据 类 型 ， 但 要 注意 这 没有 实际 意义 ， 
undefined 一 般 当 作 值 来 用 。 


let n: undefined = undefined ; // 无 意义 


undefined 类 型 的 变量 可 以 被 赋值 为 null 或 undefined 或 any， 其 他 值 不 能 对 其 进行 赋值 。 
代码 2-27 给 出 了 undefined 类 型 的 变量 用 法 。 
【代码 2-27】 undefined 变量 示例 : undefined_var.ts 

01 let uv: undefined = undefined ; 

02 let uv2: undefined = null; 

03 let uv3: undefined = 3; // 错 误 

04 let a: any = 6; 

05 uv= ai 

06 console.log (uv); L163 


从 代码 2-27 可 以 看 出 ，undefined 既 可 以 是 数据 类 型 也 可 以 是 值 。undefined 类 型 的 变量 不 
能 将 数值 6 赋 给 它 ， 但 是 可 以 赋值 any 类 型 的 变量 ， 而 any 类 型 的 变量 可 以 赋值 为 6。 因 此 代 
码 2-27 中 的 06 行 输出 6。 

综 上 可 知 , 声明 一 个 void 类 型 , undefined 类 型 和 null 类 型 的 变量 其 实 是 没有 什么 意义 的 ， 
因为 你 只 能 为 它 赋 予 undefined 和 null， 当 然 也 可 以 是 any。 

void 一 般 只 用 于 函数 返回 值 上 ， 但 是 经 常 省 略 。undefined 和 null 一 般 都 是 当 作 值 来 使 用 
的 ，undefined 表示 变量 已 经 声明 但 是 未 初始 化 变量 的 值 ， 而 null 表示 值 初始 化 为 null。 默 认 
情况 下 ，null 和 undefined 是 所 有 类 型 的 子 类 型 。 换 句 话说， 你 可 以 把 null 和 undefined 赋值 
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给 任何 类 型 的 变量 。 


| 在 编译 时 ， 如 果 开 启 了 --strictNullChecks 配置 ， 那 么 null 和 undefined 只 能 赋值 给 void 和 | 
[ 它们 本 身 。 这 能 避免 很 多 常见 的 问题 。 


2.3.5 _ Never 

Never 类 型 是 其 他 类 型 (包括 null 和 undefined) 的 子 类 型 ， 代 表 从 不 会 出 现 的 值 。Never 
类 型 只 能 赋值 给 自身 , 其 他 任何 类 型 不 能 给 其 赋值 , 包括 任意 值 类 型 。Never 类 型 在 TypeScript 
中 的 类 型 关键 词 是 never。 

Never 类 型 一 般 出 现在 函数 抛 出 异常 Error 或 存在 无 法 正常 结束 〈 死 循环 ) 的 情况 下 。 代 
码 2-28 给 出 返回 Never 类 型 的 函数 示例 。 

【代码 2-28】 Never 类 型 的 函数 示例 : never.ts 
01 // 返回 never 的 函数 


02 function error (message: string): never { 
03 throw new Error(message); 
04 } 


05 ”// 推断 返回 值 类 型 为 never 

06 function fail() { 

07 return error("Something failed"); 
08 } 

09 ”// 返回 never 的 函数 必须 存在 无 法 结束 


10 function infiniteLoop () : never { 


Ely while (true) { 

12 } 

13 
2.3.6 Symbols 

自 ES6 引入 了 一 种 新 的 原始 数据 类 型 Symbol， 表 示 独 一 无 二 的 值 。 它 是 JavaScript 语言 
的 第 七 种 原始 数据 类 型 。 


Symbol 类 型 的 变量 一 旦 创建 就 不 可 变更 ， 且 不 能 为 它 设置 属性 。Symbol 一 般 是 用 作对 象 
的 一 个 属性 。 即 使 两 个 Symbol 声明 的 时 候 是 同名 的 ， 也 不 是 同一 个 变量 ， 这 样 就 能 避免 命名 
冲突 的 问题 。 

Symbol 类 型 的 值 是 通过 Symbol 构造 函数 进行 创建 的 ,代码 2-29 给 出 了 Symbol 类 型 的 变 
量 声明 示例 。 

【代码 2-29】 Symbol 类 型 的 示例 : symbol.ts 


01 let sl = Symbol('name')7 // Symbol () 
02 let s2 = Symbol('age') 7 
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03 console.1og(s1) // Symbol (name) 
04 console.1o0g(s2) // Symbol (age) 

05 console.log(sl.toString()) // "Symbol (name)" 
06 console.1og(s2.toString()) // "Symbol(age)" 


Symbol 函数 可 以 接受 一 个 字符 串 作 为 参数 ， 表 示 对 Symbol 实例 的 描述 。 这 个 描述 主要 
是 为 了 在 控制 台 显 示 ， 或 者 转 为 字符 串 时 比较 容易 区 分 不 同 的 Symbol 变量 。 


1 Symbol 函数 前 不 能 使 用 new 命令 ， 否 则 会 报错 。 这 是 因为 生成 的 Symbol 是 一 个 原始 类 
忆 型 的 值 ， 不 是 对 象 。 也 就 是 说 ， 由 于 Symbol 值 不 是 对 象 ， 因 此 不 能 添加 属性 。 


Symbol 是 不 可 改变 且 唯 一 的 ， Symbol 函数 的 参数 只 是 表示 对 当前 Symbol 值 的 描述 , 因 
此 相同 参数 的 Symbol 函数 的 返回 值 是 不 相等 的 ， 如 代码 2-30 所 示 。 
【代码 2-30】 Symbol 类 型 的 示例 : symbol2.ts 

01 ”// 没有 参数 的 情况 

02 let sl = Symbol() 

03 let s2 = Symbol()， 

04 console.1log(s1 === s2) // false 

05 ”// 有 参数 的 情况 

06 let s3 = Symbol('age') 7 

07 let s4 = Symbol('age') 7 

08 console.1log(s3 === s4) // false 


像 字符 串 一 样 ，Symbol 也 可 以 被 用 作对 象 属性 的 键 等 。 对 象 的 属性 名 现在 可 以 有 两 种 类 
型 ， 一 种 是 字符 串 ， 另 一 种 就 是 新 增 的 Symbol 类 型 。 凡 是 属性 名 属于 Symbol 类 型 的 就 表 
示 这 个 属性 是 独一无二 的 。 这 个 特征 可 以 保证 不 会 与 其 他 同名 属性 产生 冲突 。 代 码 2-31 给 出 
了 Symbol 类 型 作为 属性 的 示例 。 
【代码 2-31】 Symbol 类 型 作为 属性 的 示例 : symbol3.ts 


01 let sym = Symbol ("name"); 
02 let sym2 = Symbol ("name"); 
03 let obj = { 


04 [sym] : "value", 
05 [sym2] : "value2", 
06 name:"value3" 


07 }; // 作为 对 象 属性 的 键 
08 console.1log (obj); 


代码 2-31 编译 成 JavaScript 后 在 浏览 器 中 运行 可 以 打印 出 如 下 信息 : 
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Object 
name: “Value3” 
Symbol(name): “value” 
Symbol(name): “value2” 
pb__proto_: Object 


调用 obj[sym] 时 报错 ， 提 示 Type 'symbol' cannot be used as an index type， 但 是 生成 的 | 


| JavaScript 可 以 正确 输出 。 


Symbol 值 不 能 与 其 他 类 型 的 值 进行 运算 ， 会 报错 ， 如 代码 2-32 所 示 。 


【代码 2-32】 Symbol 与 其 他 类 型 运算 示例 : symbol4 ts 


01 let s3 = Symbol('age') 7 
02 1let s4 = s3+" 是 symbol";  // 错 误 
03 console.log(s4) 


Symbol 值 可 以 显 式 转 为 字符 串 和 布尔 值 ， 但 是 不 能 转 为 数值 ， 如 代码 2-33 所 示 。 


【代码 2-33】 Symbol 显示 转换 示例 : symbol5.ts 


01 let s3 = Symbol('age'); 

02 let s4 = String(s3); //Symbol (age) 
03 let s5 = Boolean(s3); //true 

04 console.1log(s4) 

05 console.1og(s5) 

06 let s6 = Number(s3); // 错 误 

OU console.1og(s6) 


2.3.7 ”交叉 类 型 


交叉 类 型 (Intersection Types) 可 以 将 多 个 类 型 合并 为 一 个 类 型 。 合 


后 的 交叉 类 型 包含 


了 其 中 所 有 类 型 的 特性 。 以 经 典 的 动画 片 葫芦 娃 来 举例 ， 每 个 葫芦 娃 都 有 自己 的 特长 ，7 个 荫 


芦 娃 可 合体 为 葫芦 小 金刚 ， 他 拥有 所 有 葫芦 娃 的 技能 ， 非 常 强大 。 


下 面 假设 有 两 个 自 定义 类 型 ， 一 个 是 Car 类 型 ， 具 备 driverOnRoad 功能 ; 一 个 是 Ship 类 
型 ,具备 driverInWater 功能 。 我 们 通过 交叉 类 型 Car & Ship 来 合并 功能 ， 得 到 一 个 carShip 对 


象 。Car & Ship 是 Car 类 型 和 Ship 类 型 的 交叉 类 型 ， 如 代码 2-34 所 示 。 


【代码 2-34】 交叉 类 型 示例 : intersection_types.ts 


01 class Car { 


02 public driverOnRoad() { 

03 console.log("can driver on road"); 
04 } 

05 lL 
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06 class Ship { 


07 public driverIinWater() { 

08 console.log("can driver in water"); 
09 } 

10 | 


EE， let car = new Car(); 

Ee let ship = new Ship(); 

3 let carShip: Car & Ship = <Car & Ship>{}; 

14 carShip["driverOnRoad"] = car["driverOnRoad"]; 

3 carShip["driverIinWater"] = ship["driverInWater"]7 
16 carShip.driverInWater();//can driver in water 


17 carShip.driverOnRoad();//can driver on road 


代码 2-34 例子 中 涉及 类 的 相关 知识 ， 将 在 后 续 章节 进行 详细 说 明 。 这 里 读者 不 必 细 究 。 
13 行 创建 了 一 个 Car & Ship 类 型 的 变量 carShip， 用 个 进行 了 初始 化 ， 并 用 <Car & Ship> 对 空 
对 象 进行 类 型 断言 (将 在 2.3.9 小 节 中 进行 详细 说 明 ) ， 否 则 报错 。 


2.3.8 Union 类 型 


联合 类 型 (Union Types) 表示 取 值 可 以 为 多 种 类 型 中 的 一 种 。 联 合 类 型 与 交叉 类 型 在 用 
法 上 完全 不 同 。 

假设 有 一 个 padLeft 函数 ， 让 它 可 以 在 某 个 字符 串 的 左边 进行 填充 。 该 函数 有 两 个 参数 ， 
一 个 是 需要 被 填充 的 字符 串 ， 是 字符 类 型 ， 另 一 个 是 要 填充 的 对 象 ， 可 以 是 number 类 型 或 
string 类 型 。 

如 果 传 入 number 类 型 的 填充 对 象 , 那么 在 字符 串 左 边 填充 number 个 空格 ; 如 果 传 入 string 
类 型 的 填充 对 象 ， 那 么 在 字符 串 左 边 填充 该 字符 串 即 可 。 

为 了 实现 第 二 个 参数 padding 既 可 以 是 number 类 型 也 可 以 是 string 类 型 的 效果 ， 需 要 使 
用 联合 类 型 。number | string 表示 number 和 string 的 联合 类 型 。 下 面 的 代码 2-35 给 出 了 
padLeft 函数 使 用 联合 类 型 的 示例 。 


【代码 2-35】 联合 类 型 示例 : union_types.ts 


01 function padLeft (value: string, padding: number | string) { 


02 if (typeof padding === "number") { 

03 return Array(padding + 1).join(" ") + value; 

04 } 

05 if (typeof padding === "string") { 

06 return padding + value; 

07 } 

08 throw new Error (参数 为 string 或 number, 但 传 入 '${padding}'.`); 

09 » 

10 console.log (padLeft ("Hello world", 3)); // Hello world 
EE console.log (padLeft ("Hello world", " ")); // _ Hello world 
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12 //Argument of type 'true' is not assignable 
3 //to parameter of type 'string | number'. 
14 console.log (padLeft ("Hello world", true)); // error 


当 TypeScript 不 确定 一 个 联合 类 型 的 变量 到 底 是 哪个 类 型 的 时 候 , 只 能 访问 此 联合 类 型 的 
所 有 类 型 里 共有 的 属性 或 方法 。 


还 以 上 面 的 Car 和 Ship 类 型 为 例 , 我 们 扩展 一 个 同名 的 方法 toUpper, 联合 类 型 Car | Ship 


的 实例 就 只 能 调用 它们 共有 的 方法 toUpper, 而 driverOnRoad 和 driverInWater 不 能 调用 , 具体 
示例 如 代码 2-36 所 示 。 


【代码 2-36】 联合 类 型 调用 方法 示例 : union_types2.ts 


卫 元 可 以 用 类 型 断言 将 Car|Ship 断言 成 一 个 Car 或 者 Ship 类 型 的 对 象 ,从 而 调用 特有 的 方法 。 
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01 class Car { 


02 Public driverOnRoad() { 

03 console.log("can driver on road"); 
04 } 

05 public toUpper(str: string) { 

06 return str.toUpperCase(); 

07 } 

08 . 

09 class Ship { 

10 Public driverIinWater() { 

el console.log("can driver in water"); 
和 } 

3 public toUpper (str2: string) { 

14 return str2.toUpperCase(); 

EE } 

16 j} 


二 这 let car = new Car(); 

18 let ship = new Ship() 7 
19 let carShip: Car | Ship 
20 carShip ["driverOnRoad"] 
> carShip["driverInWater"] = ship["driverInWater"]; 


<Car | Ship>{}; 
car["driverOnRoad"]; 


py carShip["toUpper"] = ship["toUpper"]; 
23 let str: string = carShip.toUpper("hello world"); 


24 console.1log (str); // 共 有 方法 
25  //carShip.driverOonRoad(); // 不 存在 
26 //carShip.driverInWater (); // 不 存在 

有 及 (<Car>carShip) .driverOnRoad () //OK 


28 (<Ship>carShip) .driverInWater(); //OK 
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联合 类 型 往往 比较 长 ， 也 不 容易 记忆 和 书写 ， 我 们 可 以 用 类 型 别名 (Type Aliases) 来 解 
决 这 个 问题 。 类 型 别名 可 以 用 来 给 一 个 类 型 起 新 名 字 , 特别 对 于 联合 类 型 而 言 , 起 一 个 有 意义 
的 名 字 会 让 人 更 加 容易 理解 。 

类 型 别名 的 语法 是 : 

type 类 型 别名 = 类 型 或 表达 式 


类 型 别名 可 以 用 于 简单 类 型 和 自 定义 类 型 ， 也 可 以 用 于 表达 式 。 我 们 可 以 用 type 给 表达 
式 0 => string 起 一 个 别名 myfunc; 也 可 以 用 type 给 联合 类 型 string | number | myfunc 起 一 个 
别名 NameOrStringOrMyFunc。 具 体 示例 如 代码 2-37 所 示 。 


【代码 2-37】 类 型 别名 示例 : type_aliases.ts 


01 type myfunc = () => string; 
02 type NameOrStringOrMyFunc = string | number | myfunc; 
03 function getName (n: NameOrStringOrMyFunc): string { 


04 if (typeof n === 'string') { 

05 return n; 

06 } 

07 else if(typeof n === 'number'){ 
08 return n.toString(); 

09 有 

10 else { 

1 return n(); 

2 } 

3 } 


14 let a :string = "hello"; 
15 let b: number = 999; 
16 let c= function () { 


17 return "hello my func"; 

18 二 

19 console.1og (getName (a) ) 7 //hello 

20 console.1og (getName (b)); //999 

2 console.log (getName (c)); //hello my func 


另外 ， 还 可 以 给 内 置 类 型 起 一 个 别名 ， 如 string， 如 代码 2-38 所 示 。 
【代码 2-38】 内 置 类 型 的 类 型 别名 示例 : type_aliases2.ts 


01 let newString = string ; 


02 let a : newString = "new string type" ; 


虽然 可 以 用 type 给 内 置 类 型 起 别名 ,但 为 了 防止 混淆 ， 不 建议 给 字符 、 数 值 或 布尔 等 类 ] 
【 型 起 别名 。 
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最 后 ， 符 号 | 也 可 以 用 于 定义 字符 串 字 面 量 类 型 。 这 种 类 型 用 来 约束 字符 的 取 值 只 能 是 
某 几 个 字符 串 中 的 一 个 , 如 用 type 定义 一 个 表示 事件 的 字符 串 字 面 量 类 型 EventNames， 并 作 
为 函数 handleEvent 的 参数 ， 这 样 此 参数 只 能 是 'click' 或 'dbclick' 或 'mousemove'"， 如 代码 2-39 
所 示 。 


【代码 2-39】 字符 串 字面 量 类 型 示例 : string_literal_type.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 


type EventNames = "click' | "dbclick' | 'mousemove'; 

function handleEvent (ele: Element, event: EventNames) { 
console.log (event) 7 

下 

let ele = document.getElementById('div'); // 内 置 对 象 


handleEvent (ele, 'click'); // 没 问 题 
handleEvent (ele, 'dbclick'); // 没 问题 
handleEvent (ele, 'mousemove'); // 没 问 题 
handleEvent (ele, 'scroll'); // 不 存在 


必 却 类 型 别名 与 字符 串 字面 量 类 型 都 是 使 用 type 进行 定义 的 ， 注 意 二 者 的 区 别 。 | 


2.3.9 ”类 型 断言 
类 型 断言 (Type Assertion〉 可 以 用 来 手动 指定 一 个 值 的 类 型 。 类 型 断言 语法 是 : 


< 类 型 > 值 或 者 对 象 
值 或 者 对 象 as 类 型 


卫 直 在 tsx 语法 (Reactjsx 语法 的 蕊 版 中 必须 用 后 一 种 ， 因 此 <> 有 特殊 意义 。 | 
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类 型 断言 一 般 和 联合 类 型 一 起 使 用 ,可 以 将 一 个 联合 类 型 的 变量 指定 为 一 个 更 加 具体 的 类 
型 进行 操作 ， 从 而 可 以 使 用 特定 类 型 的 属性 和 方法 。 代 码 2-40 给 出 了 类 型 断言 的 示例 。 


【代码 2-40】 类 型 断言 示例 : type_assert.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


function getLength(a: string | number): number { 
//if ((a as string).length) { 
if ((<string>a) .length) { 
return (<string>a) .length; 
} else { 
return a.toString() .length; 
上 
} 
console.log (getLength (6)); WE 
console.1log(getLength ("hello")); XV5 
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联合 类 型 string | number 限定 参数 a 的 类 型 ， 可 以 用 类 型 断言 <string>a 指定 类 型 为 string， 
从 而 可 以 调用 字符 的 length 属性 ， 如 果 传 入 的 是 数值 ， 那 么 会 返回 atoString(O.length 的 值 。 类 
型 断言 成 一 个 联合 类 型 string | number 中 不 存在 的 类 型 (如 boolean) 是 不 允许 的 。 


| 类 型 断言 不 是 类 型 转换 ， 且 类 型 推断 不 能 直接 进行 调用 , 需要 放 于 条 件 判断 中 或 者 先 将 其 
| 转化 成 unknown 再 进行 类 型 断言 ， 如 console.log(<string><unknown>a).length) 当 a 为 数值 
| 时 返回 undefined。 


2.4 let 与 var 


在 JavaScript 中 定义 变量 一 般 都 是 用 var 关键 词 来 声明 ， 在 ES6 中 引入 let 也 可 以 声明 变 
量 。 在 TypeScript 语言 中 ， 支 持 用 var 和 let 进行 变量 声明 ， 但 二 者 在 变量 声明 上 有 着 明显 的 
区 别 。 

通过 var 定义 的 变量 ， 作 用 域 是 整个 封闭 函数 ， 是 全 域 的 。 通 过 let 定义 的 变量 ， 作 用 域 
是 在 块 级 或 者 子 块 中 。 因 此 , 采用 let 声明 变量 更 加 安全 ,也 更 容易 规避 一 些 不 易 发 现 的 错误 。 

在 JavaScript 中 有 一 个 变量 提升 机 制 ， 浏 览 器 中 JavaScript 引擎 在 运行 代码 之 前 会 进行 预 
解析 ， 首 先 将 函数 声明 和 变量 声明 进行 解析 ， 然 后 对 函数 和 变量 进行 调用 和 赋值 等 ， 这 种 机 制 
就 是 变量 提升 。 代 码 2-41 中 包含 3 段 代 码 ， 注 意 这 3 段 代码 应 该 分 别 运行 ， 不 要 一 起 运行 。 


【代码 2-41】 变量 提升 示例 : var_hosit.ts 


(A 

02 var myvar :string = ' 变 量 值 ' ; 

03 console.1og (myvar) 7 // 变量 值 
04 // 代 码 段 2-------------------------- 


05 var myvar :string = ' 变 量 值 '; 
06 (function() { 


07 console.1og (myvar); // 变 量 值 
08 Dt 
GON 


10 var myvar :string = ' 变 量 值 '; 
了 下 (function() { 


了 和 console.1log (myvar) 7 // undefined 
3 var myvar :string = ' 内 部 变量 值 ' ; 
a PO 


在 代码 241 中 ， 代 码 段 1 会 在 控制 台 打印 出 “变量 值 ”， 这 很 容易 理解 ， 代码 段 2 也 会 在 控 
制 台 打印 出 “变量 值 ”，Javascript 编译 器 首先 在 匿名 函数 内 部 作用 域 (Scope) 查看 变量 myvar 
是 否 声明 ， 发 现 没有 就 继续 向 上 一 级 的 作用 域 (Scope) 查看 是 否 声明 myvar， 发 现存 在 就 打印 出 
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该 作用 域 的 myvar 值 。 代 码 段 3 只 是 对 代码 段 2 做 一 个 微调 ， 结 果 却 输出 了 undefined 。 

可 理解 为 内 部 变量 myvar 在 匿名 函数 内 最 后 一 行进 行 变量 声明 并 赋值 , 但 是 JavaScript 解 
释 器 会 将 变量 声明 (不 包含 赋值 ) 提升 (Hositing) 到 匿名 函数 的 第 一 行 〈 顶 部 ) ， 由 于 只 是 
声明 myvar 变量 ， 在 执行 console.log(myvar) 语 句 时 并 未 对 myvar 进行 赋值 ， 因 此 最 终 在 控制 
台 输 出 undefined 。 

在 Javascript 语言 中 ， 变 量 的 声明 (注意 不 包含 变量 初始 化 会 被 提升 (置顶 ) 到 声明 所 
在 的 上 下 文 , 也 就 是 说 ,在 变量 的 作用 域内 ,不 管 变量 在 何 处 声明 ,都 会 被 提升 到 作用 域 的 项 
部 ， 但 是 变量 初始 化 的 顺序 不 变 。 

即使 var 声明 的 变量 处 于 当前 作用 域 的 末尾 ， 也 会 提升 到 作用 域 的 头 部 并 初始 化 为 
undefined， 在 此 之 前 都 可 以 进行 调用 ， 并 不 会 出 现 变量 未 定义 的 错误 。 


必 却 let 声明 的 变量 会 进行 变量 提升 ， 但 是 在 作用 域 所 在 的 顶部 和 let 声明 变量 之 前 let 声明 的 
[ 变量 都 无 法 访问 ， 从 而 保证 安全 。 


let 是 ES6 新 增 的 变量 声明 方式 ， 是 用 来 蔡 代 var 的 设计 ， 本 节 要 介绍 的 就 是 它 与 var 的 不 同 。 


2.4.1 let 声明 的 变量 是 块 级 作用 域 

let 声明 的 变量 是 块 级 作用 域 ， 大 括号 {} 包 围 的 区 域 是 一 个 独立 的 作用 域 ， 如 下 面 的 代码 
2-42 所 示 。 
【代码 2-42】 变量 let 声明 块 级 作用 域 示例 : let1.ts 


01 if (true) { 


02 let msg = "hello"; 
03 有 
04 console.1log (msg); // 错 误 


在 让 块 级 作用 域 中 用 let 声明 一 个 msg 变量 ， 但 是 在 块 级 作用 域外 不 能 访问 此 msg 变量 ， 
如 果 将 let 换 成 var 则 可 以 在 让 块 级 作用 域外 进行 访问 。 因 此 建议 用 let 蔡 代 var 进行 变量 声明 ， 
以 提升 代码 的 可 读 性 和 防止 变量 冲突 。 


2.4.2 let 不 允许 在 同 域 中 声明 同名 变量 

let 声明 的 变量 是 块 级 作用 域 。 在 同一 个 作用 域 中 ， 一 旦 let 声明 完 一 个 变量 后 ， 就 不 允许 
再 次 声明 一 个 同名 的 变量 ， 即 使 用 var 进行 声明 也 不 可 以 ， 如 代码 2-43 所 示 。 
【代码 2-43】 同 域 中 声明 同名 变量 示例 : let2.ts 


01 ”// 块 变量 不 允许 重 名 

02 let myvar: string = ' 变 量 值 '; 

03 var myvar: string = "var 值 "; 

04 console.1og (myvar); // 变量 值 
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二 函数 的 参数 和 画 数 体 属于 同一 个 作用 域 ， 因 此 let 命名 的 画 数 也 不 多 许 和 参数 名 同名 。 | 


下 面 的 代码 2-44 中 的 函数 func 中 有 一 个 参数 arg， 和 02 行 let 声明 的 arg 在 同一 个 作用 
域 ， 由 于 二 者 变量 名 相同 ， 因 此 会 报错 。 另 外 ， 在 TypeScript 中 ， 函 数 名 也 不 允许 重复 。 


【代码 2-44】 let 函数 中 声明 同名 变量 示例 : let3 ts 


01 function func(arg) { 

02 let arg = 27 // 和 参数 arg 重 名 
03 } 

04 func ("2"); 

05 ”// 函 数 不 能 重 名 


06 function func(arg) { 


07 { 

08 let arg2 = arg + "2"; 
09 } 

10 } 


11 funct"3rYy 


2.4.3 let 禁止 声明 前 访问 


let 用 死 区 (temporal dead zone) 规避 了 变量 提升 带 来 的 问题 ， 因 此 也 就 无 法 在 声明 前 对 
变量 进行 调用 。 在 下 面 的 代码 2-45 中 , 04 行 用 let 声明 了 一 个 变量 tmp, 那么 在 让 块 作用 域 中 ， 
03 行 访问 变量 tmp 会 报错 。 并 且 ，let 声明 的 变量 生命 周期 仅 在 块 作用 域 中 ， 不 会 污染 外 部 的 
变量 tmp， 因 此 06 行 打印 的 仍然 是 123。 


【代码 2-45】 let 声明 禁止 声明 前 访问 示例 : let4.ts 


01 Var tmp = 123; 
02 if (true) { 
03 tmp = 'abc'; // 块 作用 域 变量 tmp 在 声明 之 前 无 法 调用 


04 let tmp; 
05 1} 
06 alert(tmp); // 输 出 值 为 123， 全 局 tmp 与 局 部 tmp 不 影响 


为 什么 需要 块 级 作用 域 ? var 创建 的 变量 只 有 全 局 作用 域 和 函数 作用 域 ， 没 有 块 级 作用 
域 ， 这 带 来 很 多 不 合理 的 场景 ， 这 种 方式 往往 让 代码 难于 让 人 理解 其 意图 。 概 括 起 来 ，var 声 
明 的 变量 往往 有 如 下 问题 : 
(1) 内 层 变量 可 能 会 覆盖 外 层 变 量 
下 面 的 代码 2-46 按照 一 般 理 解 会 打印 出 "外 部 变量 "， 但 实际 情况 是 打印 出 了 undefined。 
由 于 var 不 是 块 级 作用 域 ， 再 加 上 变量 提升 机 制 (var msg = undefined 提升 到 02 行 和 03 行 之 
间 ) ， 在 调用 func 时 ， 首 先 将 msg 赋值 为 undefined， 然 后 打印 出 值 ， 导 致 内 层 的 msg 变量 
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履 盖 了 外 层 的 msg 变量 。 
【代码 2-46】 var 内 层 变 量 覆 盖 外 层 变量 示例 : var1.ts 


01 var msg : string = "外 部 变量 "; 
02 function func() { 


03 console.1log (msg); 

04 if (false) { 

05 var msg : string = ' 内 部 变量 '; 
06 

07 } 


08 func(); // undefined 
(2) 用 来 计数 的 循环 变量 泄露 为 全 局 变量 
for 循环 有 一 个 特别 之 处 ， 就 是 设置 循环 变量 的 那 部 分 是 一 个 父 作 用 域 ， 而 循环 体内 部 是 
一 个 单独 的 子 作 用 域 ， 如 代码 2-47 所 示 。 
【代码 2-47】 var for 循环 变量 泄露 为 全 局 变量 示例 : var2.ts 


01 Var msg:string = "hello wolrd'; 

02 for (var i = 0; i < msg.length; i++) { 
03 console.log (msg[i]); 

04 } 

05 console.1og(i) 7 po il 


上 面 的 代码 2-47 中 ， 变 量 i 只 用 来 控制 循环 ， 但 是 循环 结束 后 它 并 没有 消失 ， 泄 露 成 了 
全 局 变量 。let 声明 的 变量 就 不 会 出 现 这 种 问题 。for 循环 中 用 let 可 以 避免 循环 变量 泄露 为 全 
局 变量 的 问题 ， 如 代码 2-48 所 示 。 
【代码 2-48】 let for 循环 变量 不 会 泄露 为 全 局 变量 示例 : var3.ts 


01 var msg:string = "hello wolrd'; 
02 for (let i = 0; i < msg.length; i++) { 


03 console.log (msg[i]); 
04 } 
05 console.log(i); // 报 错 


let 人 允许 块 级 作用 域 的 任意 嵌 套 ， 外 层 作用 域 无 法 读 取 内 层 作用 域 的 变量 ， 且 内 层 作用 域 
可 以 定义 外 层 作用 域 的 同名 变量 ， 如 代码 2-49 所 示 。 


【代码 2-49】 变量 var 声明 示例 : var4.ts 


01 { 

02 let Dn: number = 9; 

03 活 

04 let msg:string = 'Hello World'; 

05 let n: number = 10; // 不 同 块 级 作用 域 可 以 同名 
06 ¥ 

07 console.1log (msg); // 报 错 ， 无 法 找到 msg 

08 }; 


let 块 级 作用 域 的 出 现 , 实际 上 使 得 获得 广泛 应 用 的 立即 执行 函数 表达 式 (IIFE) 显得 没有 
[ 那么 必要 了 。 
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2.5 变量 


变量 是 一 种 占 位 符 , 用 于 引用 计算 机 内 存 地 址 。 变 量 是 方便 人 来 存 取 数据 的 ， 而 内 存 地 址 
是 方便 计算 机 来 存 取 数 据 的 。 可 以 把 变量 看 作 存 储 数 据 的 容器 。 类 型 分 为 值 类 型 和 引用 类 型 ， 
所 以 变量 可 分 为 值 类 型 变量 和 引用 类 型 变量 。 

JavaScript 中 的 数据 类 型 主要 包括 两 种 ， 一 种 是 基本 类 型 〈 值 类 型 ) ， 另 一 种 是 引用 类 型 
〈 引 用 类 型 ) 。 内 存 分 为 两 个 部 分 ， 栈 内 存 和 堆 内 存 。 基 本 类 型 值 保存 在 栈 内 存 中 ， 引 用 类 型 
值 在 堆 内 存 中 保存 着 对 象 、 在 栈 内 存 中 保存 着 指向 堆 内 存 的 指针 。 

JavaScript 中 ， 基 本 类 型 值 包括 undefined、null、number、string 和 boolean， 在 内 存 中 分 
别 占有 固定 大 小 的 空间 。 引 用 类 型 值 只 有 object， 这 种 值 的 大 小 不 固定 ， 可 以 动态 添加 属性 和 
方法 ， 而 基本 类 型 则 不 可 以 。 

TypeScript 和 JavaScript 类 似 。 对 基本 类 型 值 进 行 复制 ， 复 制 的 是 值 本 身 ， 相 当 于 复制 了 
一 个 副本 ,修改 一 个 变量 的 值 不 会 影响 另外 一 个 变量 的 值 。 而 对 引用 类 型 值 进 行 复制 , 复制 的 
是 对 象 所 在 的 内 存 地 址 。 所 以 两 者 指向 的 都 是 栈 内 存 中 的 同一 个 数据 ,修改 一 个 变量 会 导致 另 
外 一 个 变量 的 值 也 进行 修改 。 
理解 变量 的 值 类 型 和 引用 类 型 是 非常 重要 的 。 为 了 让 读者 更 加 直观 地 了 解 值 类 型 和 引用 类 型 
变量 的 核心 区 别 ， 下 面 用 一 张 C# 语 言 的 示例 图 来 说 明 值 类 型 和 引用 类 型 的 差异 ， 如 图 2.1 所 示 。 


(@) Stack 
public class StackvsHeap [J 
OO! 
public votd Funl( 
eop { 
int 1 = 3; J © Stack 


ep 
p.Name = "Jack"; 
p.ID = 1; 


Person p2 = pj// 引 用 类 型， 修改 p2 会 影响 p 变 是 的 值 


让 一 产 = 2;//p.ID -> 2 
9 | 
| 


图 2.1 C# 中 的 值 类 型 和 引用 类 型 示意 图 


在 图 2.1 中 , 由 于 intj=i 中 是 int 类 型 , 为 值 类 型 变量 , 因此 j 变量 的 值 是 i 变量 值 的 副本 ， 
值 都 在 Stack 内 存 中 ， 都 是 3， 但 是 二 者 不 是 同一 个 对 象 。 因 此 ， 修 改 i 不 会 修改 j， 修 改 j 也 
不 会 修改 i。 二 者 是 独立 的 。 
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在 Person p2=p 语句 中 ，Person 为 类 ， 是 引用 类 型 ，p2 和 p 指向 同一 个 Heap 地 址 块 ， 因 
此 修改 p2 的 值 会 影响 p 的 值 。 


总 在 JavaScript 中 ， 函 数 的 参数 传递 是 按 值 传递 ， 而 且 不 能 按 引 用 传递 | 


在 TypeScript 中 ,字符 串 、 布 尔 型 和 数值 型 都 是 值 类 型 ， 而 类 、 数 组 和 元 组 等 都 是 引用 类 
型 。 从 下 面 的 代码 2-50 可 以 看 出 ， 数 组 是 引用 类 型 ， 变 量 a 和 指向 同一 个 内 存 地 址 ， 修 改 
了 的 值 ， 同 时 也 修改 了 a 的 值 。 


【代码 2-50】 引用 类 型 示例 : ref_var.ts 


01 
02 
03 
04 
05 


let a= [1,2]; 


let b= a; // 数 组 是 引用 类 型 
b[2] = 3; 

console.1o0g(a); 23 
console.1log(b); ADLDr273) 


值 类 型 就 不 是 这 样 的 ， 如 字符 串 和 数值 类 型 。 从 下 面 的 代码 2-51 可 以 看 出 ， 字 符 类 型 是 
值 类 型 变量 ， 变 量 a 和 b 指向 的 是 不 同 的 内 存 地 址 ， 只 是 值 一 开始 一 致 而 已 ， 修 改 了 b 的 值 ， 
不 会 修改 a 的 值 。 


【代码 2-51】 值 类 型 示例 : value_var.ts 


01 
02 
03 
04 
05 


2.5,1 


let a = "1,2"; 

let b= a; 

b= b+",3"» 
console.log(a); //1,2 
console.log(b); //1,2,3 


声明 变量 


在 ES5 中 声明 变量 的 方法 最 常用 的 就 是 var。 在 ES6 中 ,添加 了 let 和 const 进行 变量 声明 。 
在 ES6 环境 下 ， 一 般 的 变量 声明 都 采用 let， 而 不 建议 使 用 var。 
变量 的 命名 一 般 都 是 有 约定 的 。 在 TypeScript 中 ， 变 量 命名 必须 满足 如 下 规则 : 


变量 名 称 可 以 包含 数字 和 字母 ， 如 stuName01。 

除了 下 务 线 _ 和 美元 $ 符 号 外 ， 不 能 包含 其 他 特殊 字符 ， 和 包括 空 格 ， 如 _stuName 和 
S$tmp 都 是 合法 的 变量 名 。 

变量 名 不 能 以 数字 开头 ， 如 9Num 是 错误 的 。 


必 却 TypeScript 是 区 分 大 小 写 的 ， 比 如 numA 和 NumA 不 同 。 | 


在 TypeScript 编码 规范 中 ， 建 议 在 使 用 前 变量 一 定 要 先 声明 。 变 量 声明 可 以 使 用 以 下 4 


种 方式 : 
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(1) [var 或 let 或 const ] [变量 名 ] : [类 型 ] = 值 ; 
此 范式 进行 变量 声明 , 同时 指定 了 声明 变量 的 类 型 及 初始 值 . 代 码 2-52 分 别 给 出 了 用 var、 
let 和 const 声明 变量 的 方式 。 
【代码 2-52】 变量 声明 并 初始 化 的 示例 : declare_var1.ts 


01 var uname:string = "JackWang"; 


02 let uname2:string = "JackWang"; 


03 const version:string = "1.0"7 


区 直 | const 声明 的 常量 变量 一 定 要 初始 化 ， 否 则 会 报错 。 | 


(2) [var 或 let ] [变量 名 ] : [类 型 ] ; 
此 范式 进行 变量 声明 ， 只 指定 了 声明 变量 的 类 型 ， 初 始 值 默认 为 undefined。 代 码 2-53 分 
别 给 出 了 用 var 和 let 声明 变量 的 方式 。 


【代码 2-53】 变量 声明 不 初始 化 的 示例 : declare_var2.ts 


01 var uname:string ; 
02 let uname2:string; 
(3) [var 或 let ] [变量 名 ] ; 
此 范式 进行 变量 声明 ,只 提供 了 变量 名 ,声明 变量 的 类 型 和 初始 值 都 未 提供 。 变 量 类 型 默 
认为 any， 变 量 值 默认 为 undefined， 如 代码 2-54 所 示 。 
【代码 2-54】 变量 声明 未 提供 类 型 和 初始 值 示例 : declare_var3.ts 


01 var uname; 
02 let uname2; 
(4) [var 或 let 或 const] [变量 名 ] = 值 ; 
此 范式 进行 变量 声明 ,未 指定 声明 变量 的 类 型 , 但 是 给 出 了 初始 值 ， 这 时 会 用 类 型 推断 来 
确定 变量 的 类 型 ， 这 种 写法 更 加 简洁 ， 如 代码 2-55 所 示 。 


【代码 2-55】 变量 声明 只 给 出 初始 值 的 示例 : declare_var4.ts 


01 var uname = "JackWang"; //string 
02 let uname2 = 100 ，; //number 
03 const version = "1.0"; //string 


2.5.2 ”变量 的 作用 域 

变量 的 作用 域 就 是 定义 的 变量 可 以 使 用 的 代码 范围 。 变 量 可 以 分 为 全 局 变量 和 局 部 变量 。 
在 日 常 的 程序 开发 中 ,尽量 少 用 全 局 变量 , 防止 变量 冲突 。 局 部 变量 只 在 块 作用 域 和 函数 体内 
有 效 ， 从 而 保证 变量 的 安全 访问 。 

程序 中 变量 的 可 用 性 由 变量 作用 域 决定 。TypeScript 有 以 下 几 种 作用 域 : 


47 


TypeScript 实战 


@ 全 局 作用 域 : 全 局 变量 定义 在 程序 结构 的 外 部 ， 可 以 在 代码 的 任何 位 置 使 用 。 
@ 类 作用 域 : 这 个 变量 也 可 以 称 为 字段 。 类 变量 声明 在 一 个 类 里 ， 但 在 类 的 方法 外 面 无 
法 访问 。 该 变量 可 以 通过 类 的 实例 对 象 来 访问 。 类 变量 也 可 以 是 静态 的 ， 可 以 通过 
类 名 直接 访问 。 
@ 局 部 作用 域 : 局 部 变量 ， 只 能 在 声明 它 的 一 个 代码 块 (如 方法 ) 中 使 用 。 
代码 2-56 说 明了 3 种 作用 域 的 使 用 。 此 示例 涉及 类 的 相关 知识 点 ， 但 读者 此 时 不 要 过 多 
在 意 类 的 语法 , 这 些 会 在 后 面 的 章节 详细 进行 说 明 。 此 时 只 需 理解 变量 作用 域 的 相关 知识 点 即 


可 。 

【代码 2-56】 变量 作用 域 示例 : scope_var.ts 
01 var global var = 12 // 全 局 变量 
02 class MyClazz { 
03 clazz_val = 13; // 类 变量 
04 static sval = 10; // 静态 变量 
05 storeNum(): void { 
06 var local var = 14; // 局 部 变量 
07 y 
08 } 
09 ”console.1og ("全 局 变量 为 : " + global var); 
10 console.log (MyClazz.sval); // 静态 变量 


11 Var obj = new MyClazz(); 
3 console.10g ("类 变量 : " + obj.clazz_val); 


| var 在 函数 或 方法 中 声明 变量 ， 作 用 域 限于 此 函数 或 方法 中 。 | 


2.5.3 ”const 声明 变量 


const 和 let 在 声明 变量 的 用 法 上 基本 一 致 ， 只 是 const 声明 的 变量 被 赋值 后 不 能 再 改变 ， 
是 只 读 的 常量 。 因 此 ， 对 于 const 声明 的 变量 来 说 ， 只 声明 不 赋值 就 会 报错 。 

const 声明 的 变量 作用 域 和 let 一 致 ， 但 是 在 某 些 情况 下 用 const 更 加 安全 ， 可 以 防止 在 其 
他 地 方 被 修改 从 而 影响 程序 的 正常 运行 ， 如 代码 2-57 所 示 。 


【代码 2-57】 const 声明 变量 示例 : const_var.ts 


01 const cVar = "hello"; 
02 cVar = "change"; // 错 误 ， 不 能 赋值 


03 console.1log(cVar) 


const 实际 上 保证 的 并 不 是 变量 的 值 不 能 改动 ， 而 是 变量 指向 的 那个 内 存 地 址 所 保存 的 数 
据 不 能 改动 。 对 于 简单 类 型 的 数据 〈 如 数值 、 字 符 串 和 布尔 值 )， 值 就 保存 在 变量 指向 的 那个 
内 存 地 址 ， 因 此 等 同 于 常量 。 
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对 于 复合 类 型 的 数据 (主要 是 对 象 和 数组 ) ,变量 指向 的 是 内 存 地 址 , 保存 的 只 是 一 个 指 
向 实际 数据 的 指针 ，const 只 能 保证 这 个 指针 是 固定 的 〈 总 是 指向 一 个 固定 的 地 址 ) ， 至 于 它 
指向 的 数据 结构 是 不 是 可 变 的 ， 则 完全 不 能 控制 。 因 此 ， 将 一 个 对 象 声 明 为 常量 类 型 ， 其 对 象 
的 值 也 是 可 以 修改 的 ， 如 代码 2-58 所 示 。 


【代码 2-58】 const 声明 复合 类 型 变量 示例 : const_var.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
pl 
4 
13 
14 
15 
16 


interface Object{ 
Prop: string; 
func: () => string; 
. 
const foo: Object = {}; 
// 为 foo 添加 一 个 属性 可 以 成 功 
foo.prop = "123"; // 说 明 值 可 以 修改 
foo.func = function (): string { 
return "hello"; 
} 
// 将 foo 指向 另 一 个 对 象 就 会 报错 
foo = {}; // 报 错 


const a= []; 

a.push('Hello'); // 可 执行 
a.length = 0; // 可 执行 
a = ['Dave']; // 报错 


代码 2-58 涉及 接口 的 相关 知识 点 , 此 示例 为 了 说 明 const 声明 的 常量 对 象 本 身 的 值 是 可 以 
修改 的 ， 必 须 借助 接口 来 扩展 Object 的 属性 或 方法 。 

在 代码 2-58 中 ， 常 量 foo 储存 的 是 一 个 地 址 ， 这 个 地 址 指向 一 个 对 象 。 不 可 变 的 只 是 这 
个 地 址 , 即 不 能 把 foo 指向 另 一 个 地 址 , 但 对 象 本 身 是 可 变 的 , 所 以 依然 可 以 为 其 添加 新 属性 。 


人 在 TypeScript 中 ,Object 类 型 的 变量 不 能 动态 添加 属性 和 方法 ， 而 只 能 通过 接口 扩展 属性 


或 者 方法 。 


在 代码 2-58 中 ，13 行 声明 了 一 个 数组 常量 a， 这 个 数组 中 的 相关 属性 是 可 以 修改 的 ， 但 
是 如 果 将 另 一 个 数组 赋值 给 a 就 会 报错 。 如 果真 的 想 将 对 象 冻结 , 应 该 使 用 Object.freeze 方法 ， 
如 代码 2-59 所 示 。 


【代码 2-59】 const 声明 数值 变量 冻结 示例 : const_freeze.ts 


01 
02 


const foo = Object.freeze([]); 
foo.length = 1; // 报 错 
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运算 符 定义 了 将 在 数据 上 执行 的 某 些 功能 。 例 如 ， 在 表达 式 8 +7 = 15 中 ，+ 和 = 就 是 一 种 
运算 符 (算术 运算 符 ) 。TypeScript 中 的 主要 运算 符 可 归 类 为 : 

@ 算术 运算 符 
关系 运算 符 
逻辑 运算 符 
赋值 运算 符 
条 件 运算 符 
字符 串 操作 符 
类 型 运算 符 

不 同 的 运算 符 可 以 组 合 使 用 , 但 是 各 类 型 的 运算 符 的 优先 级 不 同 : 关系 运算 符 的 优先 级 低 
于 算术 运算 符 ， 关 系 运算 符 的 优先 级 高 于 赋值 运算 符 ; 单 目 运算 优 于 双 目 运算 ， 先 算术 运算 ， 
后 移 位 运算 , 再 按 位 运算 , 逻辑 运算 最 后 结合 。 例如 , 1 <<3+2&7 等 价 于 (1 <<(3+2))&7。 


卫 直 当 不 同 运算 符 组 合 在 一 起 的 时 候 , 用 括号 0 将 先 计算 的 括 起 来 , 这 样 可 以 提高 代码 可 读 性 。 | 


2.6.1 算术 运算 符 


算术 运算 符 (arithmetic operators) 就 是 用 来 处 理 四 则 运算 的 符号 ， 是 最 简单 、 最 常用 的 
符号 。 尤 其 是 数字 的 处 理 ， 几 乎 都 会 使 用 到 算术 运算 符号 。 


自 增 和 自 减 运算 符 只 能 用 于 操作 变量 ， 不 能 直接 用 于 操作 数值 或 常量 ! 例如 ，5++ 和 8-- 
[> 等 写法 都 是 错误 的 。 


另外 需要 注意 的 是 at+ 和 ++a 的 异同 点 , 它们 的 相同 点 都 是 给 变量 a 加 1, 不 同 点 是 a++ 
是 先 参与 程序 的 运行 再 加 1， 而 ++ta 则 是 先 加 1 再 参与 程序 的 运行 。 因 此 ， 如 果 a=8， 那 么 
console.log(a++) 会 打印 出 8， 而 console.log(++a) 会 打印 出 9， 但 最 后 a 的 值 都 为 9。 

表 2.1 给 出 了 TypeScript 中 算术 运算 符 的 具体 说 明和 示例 。 


表 2.1 算术 运算 符 说 明 
运算 符 描述 示例 


let a : number =10; 
letb :number =2; 

let c:number=a+b; 
console.log(c); //12 


+ 加 法 ， 返 回 操作 数 的 总 和 
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( 续 表 ) 


运算 符 描述 


示例 


减法 ， 


返回 值 的 差 


let a : number =10; 
letb : number =2; 
letc : number =a-b; 
console.log(c¢); //8 


， 返 回 值 的 乘积 


let a : number =10; 
let b : number =2; 

let c :number =a* b; 
console.log(c); //20 


+ 递增 ， 


递减 ， 


2.6.2 ”关系 运算 符 


法 ， 执 行 除法 运算 并 返回 商 


， 执 行 除法 并 返回 余数 


将 变量 的 值 增 加 1 


将 变量 的 值 减少 1 


let a : number =10; 
let b : number =2; 
letc :number = a/b; 
console.log(c): //5 

let a : number =9; 

let b : number =2; 
letc : number = a % b; 
console.log(c); // 1 

let a : number =9; 

let c : number = a ++; 
console.log(c); // 10 
let a : number =9; 
letc : number =a --; 


console.log(c); // 8 


关系 运算 符 用 于 确定 两 个 实体 对 象 之 间 的 关系 类 型 ， 有 小 于 、 小 于 等 于 、 大 于 、 等 于 、 大 
于 等 于 和 不 等 于 6 种 。 关 系 运算 符 返 回 一 个 boolean 值 ， 即 true 或 者 false。TypeScript 中 关系 
运算 符 的 具体 说 明和 示例 如 表 2.2 所 示 。 


表 2.2 关系 运算 符 说 明 


运算 符 


描述 


示例 


大 于 


let a : number =10; 
let b : number =2; 
console.log(a>b); //true 


小 于 


let a : number =10; 
let b : number =2; 
console.log(a<b); //false 


大 于 等 于 


let a : number =10; 
let b : number =2; 
console.log(a>=b); //true 
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( 续 表 ) 


运算 符 


描述 


示例 


小 于 等 于 


let a : number =10; 
let b : number =2; 
console.log(a<=b); //false 


等 于 


let a : number =10; 
let b : number =2; 
console.log(a 一 b); //false 


不 等 于 


leta:number=10; 
letb : number =2; 
console.log(a!=b); //true 


2.6.3 ”逻辑 运算 符 


逻辑 运算 符 用 于 组 合 两 个 或 多 个 条 件 。 逻 辑 运算 符 也 返回 一 个 boolean 值 。 逻 辑 运算 符 一 
般 和 关系 运算 符 配 合 使 用 ,多 用 于 让 条 件 判断 和 循环 中 断 条 件 等 场景 。TypeScript 中 逻辑 运算 


符 的 具体 说 明和 示例 如 表 2.3 所 示 。 
表 2.3 ”逻辑 运算 符 说 明 


运算 符 描述 


示例 


才 返 回 true 


仅 当 指 定 的 所 有 表达 式 都 返回 true 时 ， 运 算 符 


如 果 指定 的 表达 式 至 少 有 一 个 返回 tue， 则 运 


let a : number =10; 
let b : number =2; 
console.log( a>9 && b>7 ); //false 


let a : number =10; 
let b : number =2; 


I 算 符 返回 true 
console.log( a>9 || b>7 ); //true 
let a : number =10; 

! 运算 符 返回 相反 的 表达 式 结果 let b : number =2; 


console.log( ! (a>9 && b>7 ); //true 


2.6.4” 按 位 运算 符 


按 位 运算 符 用 来 对 二 进 制 位 进行 操作 。 位 运算 符 一 般 用 于 数值 , 在 具体 运算 时 要 先 将 十 进 


制 转 成 二 进 制 后 再 计算 。TypeScript 中 按 位 运算 符 的 具体 说 明和 示例 如 表 2.4 所 示 。 
表 2.4 按 位 运算 符 说 明 
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运算 符 描述 示例 
leta:number=2;//10 
& 按 位 与 ， 对 其 整数 参数 的 每 一 位 执行 “与 ”运算 |letb:number=3://11 


console.log( a&b );//2 
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( 续 表 ) 


运算 符 描述 示例 


leta:number=2;//10 
| 按 位 或 ， 对 其 整数 参数 的 每 一 位 执行 “或 ”运算 “|etb:number=3;//11 
console.log( a & b ); //3 
按 位 异 或 ， 对 其 整数 参数 的 每 一 位 执行 “ 异 或 ” 运 | let a : number=2;// 10 
* 算 异 或 意味 着 操作 数 1 为 rue 或 操作 数 2 为 tme |letb:number=3;//11 
但 两 者 不 能 同时 为 tue console.log( a^ b);//1 
leta:number=2;//10 
按 位 取 反 ， 这 是 一 个 一 元 运算 符 ， 并 通过 取 反 操作 | letb : number =3 ;//11 
数 中 的 所 有 位 进行 操作 console.log( ~b ); // -4 
console.log( ~a ); // -3 
leta:number=2;//10 
let b:number=3;//11 
console.log( 1<<b ); //8 
console.log( 2<<a ); // 8 


左 移 , 通过 在 第 二 个 操作 数 指定 的 位 数 将 第 一 个 操 
作 数 中 的 所 有 位 向 左 移动 。 新 位 用 零 填充 。 将 一 个 
值 左 移 一 个 位 置 相 当 于 将 其 乘 以 2， 移 位 两 个 位 置 
相当 于 乘 以 4， 以 此 类 推 


<< 


leta:number=2;//10 
letb:number =3;//11 
console.log( a>>1 );// 1 
console.log( b>>2 ); /0 


右 移 ， 二 进 制 右 移 运算 符 。 左 操作 数 的 值 是 由 右 操 
作 数 指定 的 位 数 来 向 右 移动 


>> 


leta:number=2;//10 
let b:number =3;//11 
console.log( a>>>1 ); // 1 
console.log( b>>>2 ); //0 


无 符号 右 移 ， 这 个 运算 符 就 像 >> 运 算 符 一 样 ， 只 不 
过 在 左边 移入 的 位 总 是 为 零 


2.6.5 ”赋值 运算 符 


基本 的 赋值 运算 符 是 =。 它 的 优先 级 别 低 于 其 他 的 运算 符 , 所 以 对 该 运算 符 往往 最 后 读 取 。 
TypeScript 中 赋值 运算 符 的 具体 说 明和 示例 如 表 2.5 所 示 。 


表 2.5 赋值 运算 符 说 明 
运算 符 描述 示例 


leta:number=2; 


= 简单 的 赋值 ， 将 值 从 右 侧 操作 数 赋 给 左 侧 操 作 数 。 | mb 区 


c=a; 


console.log(c ); //2 


leta:number=2; 
加 法 赋值 ， 将 右 操作 数 添加 到 左 操作 数 并 将 结果 赋 给 | let c: number = 3; 
左 操作 数 c+=a//c=c+a; 


console.log(c );//5 
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( 续 表 ) 


运算 符 描述 示例 
leta:number=2; 

减法 赋值 ， 从 左 操作 数 中 减 去 右 操作 数 ， 并 将 结果 赋 | let c: number = 3; 

给 左 操作 数 c=alc=c-a; 
console.log(c ); //-1 


leta:number=2; 
乘法 赋值 ， 将 右 操作 数 与 左 操作 数 相 乘 ， 并 将 结果 赋 | let c: number = 3; 
给 左 操作 数 c*=a;y/c=C*a; 


console.log( ¢ );//6 


leta :number=2; 
除法 赋值 ， 将 左 操作 数 除 以 右 操作 数 ， 并 将 结果 赋 给 | let c: number = 3; 
左 操作 数 cf=aylc=c/a; 
console.log( ¢ );// 1.5 


2.6.6 ”等 号 运算 符 

等 号 运算 符 = 一 和 一 都 可 以 用 于 判断 两 个 对 象 是 否 相 等 , 但 是 具体 细节 上 不 同 。 一 
在 比较 的 时 候 会 进行 自动 数据 类 型 转换 。 而 = 一 是 严格 比较 ， 不 会 进行 自动 转换 ， 要 求 进行 比 
较 的 操作 数 必须 类 型 和 值 一 致 ， 不 一 致 时 返回 false， 如 代码 2-60 所 示 。 
【代码 2-60】 等 号 运算 符 示例 : equal_opt.ts 

01 let a: number = 1; 

02 let b :any = "1"7 


03 console.log(a == b); //true 
04 console.log(a === b); //false 


2.6.7 ”否定 运算 符 (-) 

否定 运算 符 - 可 以 更 改 值 的 符号 。 举 一 个 例子 : 5 应 用 否定 运算 符 为 -5 。 否定 运 算 符 的 
基本 用 法 如 代码 2-61 所 示 。 
【代码 2-61】 否定 运算 符 示例 : neg_opt.ts 


01 let a: number = 1; 
02 let b: number = ~ a; 
03 console.1log(b); Jl 


| 两 个 连续 的 否定 运算 竺 可 以 抵消 ， 但 不 能 直接 用 -5 ， 而 是 用 -(.5)， 结 果 为 5。 | 
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2.6.8 连接 运算 符 (+) 

连接 运算 符 一 般 用 于 字符 串 拼接 。 用 于 字符 串 时 的 + 运算 符 将 第 二 个 字符 串 追 加 到 第 一 
个 字符 串 上 。 连 接 运算 符 还 可 以 连接 字符 和 数字 、 字 符 和 数组 以 及 字符 和 布尔 等 。 这 些 不 同 的 
连接 在 结果 上 也 是 有 差异 的 。 代 码 2-62 给 出 了 连接 运算 符 的 相关 用 法 。 
【代码 2-62】 连接 运算 符 示例 : join_opt.ts 

01 let a: string = "hello"; 


02 let b: string = "world"; 
03 Let er oting ma 夫 天 


04 console.log(c); // hello world 
05 let arr = [1, 2, 3]; 

06 console.log("" + arr); i ek 

07 console.log(""+ true); // "true" 


08 console.log("" + null); nally 


连接 运算 待 和 算术 运算 符 中 的 + 不 同 ， 连 接 运算 特 中 必须 有 一 个 是 字符 串 。5+ "6" 是 "56"; | 
| 而 5+6=11。 


2.6.9 条 件 运算 符 (?) 

条 件 运算 符 用 来 表示 一 个 条 件 表达 式 。 条 件 运算 有 时 也 被 称 为 三 元 运算 符 ,基本 语法 如 下 : 

条 件 表达 式 ? 条 件 表达 式 为 true 时 的 值 : 条 件 表达 式 为 false 时 的 值 

代码 2-63 给 出 了 条 件 运 算 符 的 基本 用 法 。 
【代码 2-63】 条 件 运 算 符 示例 : condition_opt.ts 

01 let a: number = 10; 

02 let c: string = a>9 ? "大 于 9” ; "小 于 等 于 9"; 

03 console.log(c); Ve 

在 代码 2-63 中 ， 第 02 行 检查 变量 a 中 的 值 是 否 大 于 9。 如 果 a 设置 为 大 于 9 的 值 ， 就 返 
回 字符 串 “ 大 于 9”， 否 则 返回 字符 串 “ 小 于 等 于 9”。 由 于 变量 a 是 10，10>9 为 true， 因 此 
返回 第 一 个 字符 串 “ 大 于 9”。 


卫 二 | 条 件 运算 符 可 以 蔡 换 简单 的 这 .else 语句 ， 让 代码 更 加 简洁 。 | 


2.6.10 ”类 型 运算 符 (typeof) 


typeof 操作 符 返 回 一 个 字符 串 ， 用 以 获取 一 个 变量 或 者 表达 式 的 类 型 。typeof 运算 符 一 般 
能 返回 如 下 几 个 结果 : number，boolean，string，symbol，function，object 和 undefined。 
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表 2.6 给 出 常见 的 类 型 对 象 的 typeof 返回 值 。 
表 2.6 常见 类 型 对 象 的 typeof 返回 值 


变量 类 型 示例 typeof 返回 值 
number typeof 2 "number” 
typeof true 


ypeof "hello" 
peof undefined 

function typeof JSON.stringify "function" 
peof [1.2 "object" 

object typeof 0 

enum typeof Colors; 

peof Colors.Red 


typeof [2."hello" 
为 了 验证 结果 ， 用 下 面 的 代码 2-64 来 查看 不 同类 型 的 变量 上 用 typeof 输出 的 结果 。 
【代码 2-64】 类 型 运算 符 示例 : typeof.ts 


01 let a: number = 2; 


02 console.log (typeof a); //"number" 
03 let b: string = "hello"; 

04 console.log (typeof b); /natring" 
05 let c: boolean = true; 

06 console.log (typeof c); //"boolean" 
07 Le d= nuliy 

08 console.log (typeof d) //"object" 
09 console.log (typeof undefinedVar); // 未 定义 undefined 
10 enum Colors { 

:al Red, 

12 Green, 

13 Yellow 

14 } 


IS let color: Colors = Colors.Red; 
16 console.log (typeof color); //"number" 
I let f = function () { 


18 console.log("hello world"); 

49 二 

20 console.1og (typeof f) 7 //"function™ 
2 let g= []; 

22 console.log (typeof g) //"object" 


23 let m: number[] = [1, 2]; 
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24 console.log (typeof m) 7 //"object" 


总 let 声明 的 变量 在 声明 之 前 不 可 用 typeof 来 输出 操作 数 的 类 型。 | 


代码 2-65 给 出 一 个 错误 的 示范 。01 行 用 typeof a 查看 a 变量 的 类 型 ， 但 是 由 于 a 类 型 是 
let 声明 的 ， 因 此 不 能 在 声明 之 前 进行 调用 。03 行 用 typeof b 查看 变量 b 的 类 型 ， 由 于 b 是 用 
var 声明 的 ， 会 进行 变量 提升 ， 因 此 输出 undefined 而 没有 报错 。 


【代码 2-65】 类 型 运算 符 示 例 2 : typeof2 .ts 


01 console.log (typeof a); // 声 明之 前 不 能 调用 
02 let a: number = 2; 

03 console.log (typeof b); //undefined 

04 Var b: number = 2; 


2.6.11 instanceof 运算 符 

instanceof 运算 符 可 用 于 测试 对 象 是 否 为 指定 类 型 的 实例 ， 如 果 是 ,那么 返回 的 值 为 true， 
否则 返回 false。instanceof 运算 符 的 基本 语法 为 : 

类 实例 instanceof 类 


下 面 定义 了 一 个 People 类 ， 其 中 有 两 个 私有 属性 name 和 age， 如 代码 2-66 所 示 。05 行 
用 new People 创建 了 一 个 类 的 实例 man，06 行 man instanceof People 则 返回 true。 


【代码 2-66】 instanceof 运算 符 示 例 : instanceof.ts 


01 class People { 


02 Private name: string = ""; 
03 Private age: string = ""; 
04 } 


05 let man: People = new People (); 
06 alert (man instanceof People ); //true 


instanceof 左边 的 只 能 是 any 类 型 或 者 对 象 类 型 或 者 类 型 参数 (type parameter) 。 其 他 不 
【 能 用 ， 如 "hello" instanceof string 报错 。 


2.6.12 ”展开 运算 符 〈…) 


展开 运算 符 〈spread operator) 人 允许 一 个 表达 式 在 某 处 展开 。 展 开 运 算 符 在 多 个 参数 〈 用 
于 函数 调用 ) 或 多 个 元 素 (用 于 数组 字面 量 ) 或 者 多 个 变量 (用 于 解构 赋值 ) 的 地 方 可 以 使 用 。 
合理 使 用 展开 运算 符 可 以 使 代码 更 加 简洁 。 展 开 运 算 符 为 “...”。 

展开 运算 符 “...” 主 要 有 以 下 应 用 场景 : 
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(1) 函数 动态 参数 

在 TypeScript 中 可 以 定义 add 函数 ， 其 参数 为 ..args (args 是 rest 剩余 参数 ， 后 面 章节 再 
详细 介绍 ) 可 以 允许 传 入 任意 个 数 的 参数 。 在 add 函数 内 部 ， 用 for... of 循环 将 传 入 的 参数 求 
和 并 返回 值 ， 如 代码 2-67 所 示 。 
【代码 2-67】 展开 运算 符 示例 : spread_opt1.ts 


01 function add(...args) { 


02 let sum = 0; 

03 for (let item of args) { 

04 sum += item; 

05 } 

06 return sum; 

07 } 

08 let arr = [1, 2, 3, 4]; 

09 //let args = add(arr); Py dnl fete BR 


10 let args = add(...arr); 
了 console.1log(args) //10 


5 如 果 调用 add(arD， 那 么 返回 的 结果 不 是 10。 | 


在 代码 2-67 中 ， 在 调用 函数 时 先 声 明了 一 个 数值 型 数组 arr ， 将 add(.…arr) 进 行 传 入 即 可 
获取 数组 元 素 的 累加 值 10。 
(2) 数组 合并 
假设 有 两 个 数组 , 那么 用 展开 运算 符 可 以 很 方便 地 进行 合并 。 展开 运算 符 对 数组 进行 合并 
的 语法 相当 简洁 ， 如 代码 2-68 所 示 。 
【代码 2-68】 展开 运算 符 数组 合并 示例 : spread_opt2.ts 
01 let arr = [1, 2, 3]; 
02 let args = [...arr,4,5]; 
03 console.log(args); V/ [1,2,3,4,5] 
(3) 复制 数组 
由 于 数组 是 按照 引用 传递 值 的 ， 因 此 要 想 复制 一 个 数组 的 副本 , 不 能 直接 赋值 。 此 时 用 展 
开 运 算 符 可 以 很 方便 地 进行 数组 备份 ， 如 代码 2-69 所 示 。 
【代码 2-69】 展开 运算 符 复制 数组 示例 : spread_opt3.ts 


01 let arr = [1,2,3]; 


02 Tet axE2 = [.. .Brr]? // 和 arr.slice() 一 臻 
03 arr2.push (4); 

04 console.log (arr); wllr2n3d 

05 console.log (arr2); //[1,2,3,4] 
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(4) 解构 赋值 
展开 运算 符 在 解构 赋值 中 的 作用 是 将 多 个 数组 项 组 合成 一 个 新 数组 。 不 过 要 注意 ,解构 赋 
值 中 展开 运算 符 只 能 用 在 末尾 ， 如 代码 2-70 所 示 。 
【代码 2-70】 展开 运算 符 解构 赋值 示例 : spread_opt4.ts 


01 Let iar De sarg3l = [le Zr 3 AT 


02 console.1log(a); AI 
03 console.1og(b); vid 
04 console.1log (arg3); //[3,4] 


(5) ES7 草案 中 的 对 象 展开 运算 符 
可 以 将 对 象 当 中 的 一 部 分 属性 取出 来 生成 一 个 新 对 象 赋值 给 展开 运算 符 的 参数 。 例 如， 下 
面 代码 2-71 中 的 args 值 就 为 一 个 新 的 对 象 {b:4.c:3}。 
【代码 2-71】 展开 运算 符 对 象 解构 示例 : spread_opt5.ts 


01 Lob ya rg = Ml mr Or Sy Dea 


02 console.lo0g(a); //1 获取 对 象 a 属性 
03 console.log(y); //2 获取 对 象 y 属性 
04 console.log(args); //{b:4,c:3} 

A =y 


人 此。 数字 


数字 是 一 种 用 来 表示 数 的 书写 符号 。 不同 的 记 数 系统 可 以 使 用 相同 的 数字 。 数字 在 复数 范 
围 内 可 以 分 实数 和 虚数 , 实数 又 可 以 划分 有 理 数 和 无 理 数 或 分 为 整数 和 小 数 , 任何 有 理 数 都 可 
以 化 成 分 数 形式 。 

一 般 在 现实 生活 中 ,常用 的 数字 进 制 是 十 进 制 ， 计 算 机 内 部 是 基于 二 进 制 的 。 不 同 进 制 的 
数 可 以 相互 换算 。 数 学 之 美 ， 可 以 用 数字 来 抽象 现实 的 事物 发 展 规律 ， 从 而 指导 现实 生活 , 为 
人 类 服务 。 

在 一 个 应 用 程序 中 ,数字 和 字符 串 一 样 , 是 非常 常用 的 一 种 数据 类 型 ， 在 一 些 财务 或 工程 
领域 的 软件 中 更 显 重要 。 

在 TypeScript 中 ， 可 以 用 number 来 定义 一 个 数值 类 型 的 变量 。 另 外 ， 可 以 利用 number 
的 类 型 封装 对 象 Number, 调用 其 构造 函数 来 创建 一 个 Number 对 象 , 它 的 值 是 number 类 型 的 ， 
如 代码 2-72 所 示 。 


【代码 2-72】 Number 基本 用 法 示例 : Number.ts 


01 let a: number = 2.8; 

02 //'number' is a primitive, but 'Number' is a wrapper object 
03 //let b: number = new Number ("2"); // 错 误 

04 let c: Number = new Number ("2"); 
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05 alert(c) 7 V2 

06 let d: Number = new Number (3); 

07 alert (d); //3 

08 let e: Number = new Number (true); 
09 alert (e); WET 

10 let f: Number = new Number (false); 
El alert (f); /7/0 

42 let g: Number = new Number ("true"); 
13 alert (g); //NaN 

14 let h: Number = new Number ({}); 

LS alert (h); //NaN 

16 let m: Number = new Number (6); 

17 alert (m); //6 


可 以 用 let 或 者 var 进行 数值 变量 的 声明 。 在 代码 2-72 中 , 01 行 中 用 let 声明 了 一 个 数值 
变量 a， 并 初始 化 其 值 为 2.8。04 行 用 new Number("2") 构造 函数 来 创建 值 为 2 的 Number 对 
象 。16 行 用 new Number(6) 构造 函数 也 可 以 创建 值 为 6 的 Number 对 象 。new Number(true) 和 
Number(false) 分 别 返 回 值 为 1 和 0 的 Number 对 象 。 


传 入 的 参数 将 在 Number 构造 函数 中 被 转换 到 number， 如 果 转 换 失 败 ， 就 返回 NaN， 否 
[ 则 返回 转换 的 值 为 number 类 型 的 Number 对 象 。 


2.7.1 Number 的 属性 


数值 作为 一 个 常用 的 对 象 ,， 其 中 也 有 一 些 常用 的 属性 来 说 明 对 象 的 相关 信息 。 例 如 , 数值 
本 身 是 有 最 大 值 和 最 小 值 的 。 表 2.7 列 出 了 一 组 Number 对 象 的 属性 。 


表 2.7 Number 基 本 属性 


属性 说 明 

MAX VALUE 数字 的 最 大 可 能 值 可 以 是 1.7976931348623157E + 308 
MIN_VALUE 数字 的 最 小 可 能 值 可 以 是 5E-324 

NaN 等 于 一 个 不 是 数字 的 值 

NEGATIVE INFINITY | 小 于 MIN_VALUE 的 值 


POSITIVE _INFINITY “| 大 于 MAX_VALUE 的 值 


NumberEPSILON 实际 上 是 能 够 表示 的 最 小 精度 。 误 差 如 果 小 于 这 个 值 ， 就 可 
以 认为 不 存在 误差 ， 值 为 2.220446049250313e-16 


Number 对 象 的 静态 属性 。 使 用 prototype 属性 将 新 属性 和 方法 分 配给 当前 文档 
PE 中 的 Number 对 象 


EPSILON 


60 


第 2 章 TypeScript 基本 语法 


( 续 表 ) 


属性 属性 说 明 
MAX_SAFE_INTEGER | 最 大 可 精确 计算 的 整数 ，2^53 


MIN_SAFE _INTEGER | 最 小 可 精确 计算 的 整数 ，-2^53 


下 面 用 代码 来 输出 Number 对 象 的 属性 。 代 码 2-73 给 出 了 Number 属性 中 的 基本 用 法 。 
【代码 2-73】 Number 属性 示例 : Number2.ts 


01 ”console.1log ("number 最 大 值 :" + Number.MAX VALUE); 
02 ”console.1og ("number 最 小 值 :" + Number.MIN _VALUE); 
03 ”console.1og(" 负 无 穷 : " + Number.NEGATIVE INFINITY); 
04 ”console.1og(" 正 无 穷 : " + Number.POSITIVE INFINITY); 
05 console.log (Number .prototype); 


2.7.2 NaN 

NaN 是 代表 非 数字 值 的 特殊 值 ， 用 于 指示 某 个 值 不 是 数字 。 可 以 把 Number 对 象 设置 为 该 
值 ， 来 指示 其 不 是 数字 值 。 可 以 使 用 isNaNO 全 局 函数 来 判断 一 个 值 是 否 是 NaN 值 。 

Number.NaN 是 一 个 特殊 值 ， 说 明 某 些 算术 运算 〈 如 求 负数 的 平方 根 ) 的 结果 不 是 数字 。 
方法 parseInt() 和 parseFloat() 在 不 能 解析 指定 的 字符 串 时 就 返回 这 个 值 。 

TypeScript 以 NaN 的 形式 表示 Number.NaN。 注 意 ，NaN 与 其 他 数值 进行 比较 的 结果 
总 是 不 相等 的 , 包括 它 自身 在 内 。 因 此 ,不 能 与 Number.NaN 比较 来 检测 一 个 值 是 不 是 数字 ， 
而 只 能 调用 isNaN() 来 比较 ， 如 代码 2-74 所 示 。 


【代码 2-74】 NaN 示例 : nan.ts 


01 let a = Number.NaN; 

02 let b = Number.NaN; 

03 console.log(a == b); //false 

04 console.1log (Number.isNaN (a)); //true 


2.7.3 prototype 


上 面 提 到 prototype 属性 使 我 们 有 能 力 向 对 象 上 动态 添加 属性 和 方法 。 在 TypeScript 中 ， 
函数 可 以 直接 用 prototype 对 函数 属性 和 方法 进行 扩展 ， 如 代码 2-75 所 示 。 


【代码 2-75】 prototype 函数 扩展 示例 : prototype_func.ts 


01 function People (id:string，name:string) { 


02 this.id = id; 
03 this.name = name; 
04 } 
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05 Var emp = new People("123"， "Smith") 
06 Var jack = new People("234"， "JRCK") 7 
07 People.PrototypPe.email = "smith@163.com"; 
08 People.pPrototype.walk = function () { 


09 console.log(this.name + " walk"); 

10 } 

yi jack.email = "jack@163.com"; 

12 console.log (emp.id); HT23 

Ee console.log (emp.name); //sSmith 

14 console.log (emp.email); //smith@163.com 
15 console.log(emp.walk()); //Smith walk 

16 console.1log(jack.id); //234 

Ey console.log(jack.email); // jack@163.com 
18 console.log(jack.walk()); //jack walk 


Number 对 象 无 法 通过 prototype 直接 添加 属性 和 方法 ， 如 下 所 示 。 
Number .prototype.prop2 = "3" ; // 错 误 


那么 该 怎样 去 扩展 Number 对 象 呢 ? 这 里 可 以 借助 在 Number 接口 interface 上 来 进行 扩 
展 《〈 接 口 将 在 后 续 章 节 详 细 说 明 ) ， 如 代码 2-76 所 示 。 


【代码 2-76】 prototype 对 Number 对 象 扩展 示例 : prototype_number.ts 


01 interface Number { 


02 padLeft (chars: string, length: number): string; 

03 E 

04 Number.prototype.padLeft = function (chars: string, length: number): 
string { 

05 return (chars.repeat (length) + this); //this 代码 值 

06 Fg 

07 let a= 9; 

08 console.log(a.padLeft ("0", 3)); //0009 


代码 2-76 中 01~03 行 通过 在 interface Number 接口 上 定义 了 一 个 padLeft 的 方法 ， 可 以 在 
Number.prototype.padLeft 上 定义 具体 实现 逻辑 。 


总 TypeScript 中 的 Number.prototype 不 能 直接 添加 新 的 属性 和 方法 ， 和 JavaScript 不 一 样 。 | 


2.7.4 ”Number 的 方法 


Number 对 象 不 但 包含 一 些 属性 ， 同 时 也 包含 一 些 方法 。 这 些 方法 可 以 更 好 地 为 我 们 提供 
服务 。 表 2.8 列 出 了 一 组 Number 对 象 的 基本 方法 。 
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表 2.8 Number 基 本 方法 


方法 方法 说 明 
ltoExponential() 强制 数字 以 指数 表示 法 显示 
ltoFixedO 格式 化 小 数 点 右 侧 具有 特定 位 数 的 数字 
ltoLocaleString() 以 浏览 器 的 本 地 设置 而 变化 的 格式 返回 当前 数字 的 string 值 
本 定义 显示 数字 的 总 位 数 〈 包 括 小 数 点 左 侧 和 右 侧 的 数字 ) 。 负 的 精度 
ltoPrecision() 将 引发 错误 
_ 返回 数字 的 值 的 string 表示 形式 。 该 函数 可 以 传 入 一 个 基数 参数 ， 一 
[的 个 介 于 2 和 36 之 间 的 整数 ， 指 定 用 于 表示 数值 的 进 制 的 基数 
alueOfD) 返回 数字 的 原始 值 
isFiniteO 用 来 检查 一 个 数值 是 否 为 有 限 的 〈finite) ， 即 不 是 mfinity 
isNaNO 是 否 为 非 数 值 型 
lisInteger() 用 来 判断 一 个 数值 是 否 为 整数 
将 参数 解析 成 整数 ， 解 析 成 功 返 回 数值 ， 否 则 返回 NaN 
将 参数 解析 成 浮 点 数 ， 解 析 成 功 返 回 数值 ， 否 则 返回 NaN 
有 表示 某 值 是 否 在 整数 范围 -2^53~2^53 之 间 (不 含 两 个 端点 ) ， 超 过 这 
lisSafeInteger() 个 范围 就 返回 false 


下 面 针对 Number 的 方法 用 代码 来 具体 查看 一 下 各 方法 的 主要 作用 , 这 样 更 容易 直观 掌握 
各 方法 的 实际 含义 ， 如 代码 2-77 所 示 。 


【代码 2-77】 Number 方法 示例 : method_number.ts 


01 let a = 12345.28; 


02 console.1log (a.toExponential (2)); //1.23e+4 
03 console.log(a.toFixed(2)); //12345.28 
04 console.log(a.toLocaleString()); /7127345<28 
05 console.1log(a.toString()) 7 //12345.28 
06 console.1log(a.toString(2) ) 7 

07 console.1log(a.tostring (8)); // 30071.2172702436561 
08 console.log(a.toPrecision(1)); //1e+4 

09 console.log(a.valueOf ()); //12345.28 
10 console.log (Number.isFinite(a)); //true 

11 console.log (Number.isNaN (a)); //false 

12 console.log (Number.isInteger (a)); //false 

3 console.1og (Number.isSafeInteger (a)); //false 

14 console.1og (Number .parseFloat ("2.18")); A219 

15 console.log (Number .parseInt ("2.18")); AS 


16 console.log (Number .parseFloat ("2.18")); 人 
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四 oo 
SO 字符 串 


字符 串 〈string) 在 任何 一 门 编程 语言 中 都 至 关 重要 。 字 符 串 在 存储 上 类 似 字符 数组 ， 所 
以 它 每 一 位 的 单个 元 素 都 是 可 以 提取 的 。 字 符 串 是 由 数字 、 字 母 、 下 画 线 组 成 的 一 串 字 符 。 它 
是 TypeScript 语言 中 表示 文本 的 数据 类 型 。 

在 TypeScript 语言 中 , 可 以 用 半角 的 双 引 号 或 单 引号 来 表示 字符 串 值 , 并 且 二 者 可 以 相互 
嵌 套 使 用 。 在 动态 语言 中 ， 用 字符 串 来 表示 代码 ， 并 且 可 以 动态 执行 ， 这 个 功能 异常 强大 , 但 
是 也 比较 危险 ， 可 能 会 执行 恶意 代码 ， 如 代码 2-78 所 示 。 


【代码 2-78】 string eval 方法 示例 : string_eval.ts 


01 let b = 12345.28; 
02 eval("let a = 2 ; console.log(a+b);"); 


2.8.1 构造 函数 
在 TypeScript 中 ， 可 以 用 new String() 构 造 函 数 来 定义 一 个 String 对 象 。 它 的 值 是 string 
类 型 的 。 代 码 2-79 演示 了 String 构造 函数 的 基本 用 法 。11 行 中 的 语句 是 错误 的 ，string 是 原 
始 类 型 ， 而 String 是 它 的 封装 对 象 ， 二 者 不 一 样 。 
【代码 2-79】 String 构造 函数 示例 : string_construct.ts 


01 let a = new String("dddd"); 

02 console.1log(a); 

03 let b = new String(222); 

04 console.1og(b); 

05 let c = new String(true); 

06 console.log(c); 

07 console.log(c[0]); Wt 

08 let d = new String({}); 

09 console.1log(); 

10 //'string' is a primitive, but 'String' is a wrapper object 
到 天 let str:string = new String("dddd"); // 错 误 


2.8.2 prototype 


String.prototype 中 内 置 了 很 多 方法 ， 这 样 就 可 以 在 任何 一 个 string 类 型 的 变量 上 去 直接 调 
用 String.prototype 中 的 方法 。 在 JavaScript 中 ，prototype 是 实现 面向 对 象 的 一 个 重要 机 制 ， 可 
以 动态 地 扩展 属性 和 方法 。 

在 TypeScript 中 ， 如 果 用 代码 2-80 来 扩展 方法 ， 编 译 器 就 会 报错 。 
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【代码 2-80】 String.prototype 扩展 错误 示例 : string_prototype.ts 


01 ”// 错误 
02 String.prototype.padZero = function (this: string, length: number) { 


03 var s = this; 

04 while (s.length < length) { 
05 5 二 109 + Sy 

06 } 

07 return s; 

08 }; 


加 /元 | TypeScript 中 的 String.prototype 不 能 直接 添加 新 的 属性 和 方法 ， 这 和 JavaScript 不 一 样 。 | 


如 果 需 要 动态 地 扩展 String.prototype 中 的 方法 或 属性 , 我 们 必须 通过 定义 interface String 
来 实现 扩展 ， 如 代码 2-81 所 示 。 


【代码 2-81】 String.prototype 扩展 示例 : string_prototype2.ts 


01 interface String { 

02 leadingChars (chars: stringlnumber，1length: number) : string; 

03 } 

04 String.prototype.leadingChars = function (chars: string|number, length: 
number): string { 


05 return (chars .toString() .repeat (length) + this).substr(-length); 
06 i 

07 let a = "@"; 

08 console.log(a.leadingChars ("0", 8)); //0000000@ 


在 代码 2-81 中 ， 首 先 用 接口 interface String 来 声明 一 个 方法 leadingChars， 这 样 就 可 以 用 
String.prototype.leadingChars 来 具体 实现 其 方法 逻辑 了 。 
2.8.3 字符 串 的 方法 


字符 串 的 一 个 常用 属性 是 length， 可 以 输出 字符 的 长 度 。 在 字符 串 中 更 多 使 用 的 是 方法 。 
这 些 方法 可 以 更 好 地 让 我 们 操作 字符 串 。 表 2.9 列 出 了 一 组 String 对 象 的 方法 。 


表 2.9 String 基本 方法 


方法 说 明 

harAt() 返回 在 指定 位 置 的 字符 

harCodeAtO 返回 在 指定 位 置 的 字符 的 _Unicode 编码 

oncat() 连接 两 个 或 更 多 字符 串 ， 并 返回 新 的 字符 串 

lindexOfO 个 指定 的 字符 串 值 在 字符 串 中 首次 出 现 的 位 置 

lastIndexOf) 后 向 前 搜索 字符 串 ， 并 从 起 始 位 置 (0) 开始 计算 返回 字符 串 最 后 出 现 的 位 置 
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( 续 表 ) 

方法 
localeCompare() 用 本 地 特定 的 顺序 来 比较 两 个 字符 串 
ImatchO 查找 到 一 个 或 多 个 正则 表达 式 的 匹配 
|ceplace0 替换 与 正则 表达 式 匹配 的 子 串 
search() 索 与 正则 表达 式 相 匹配 的 值 
liceO 字符 串 分 割 为 子 字符 串 数组 
substrO 从 起 始 索 引号 提取 字符 串 中 指定 数目 的 字符 
Substring 取 字 符 串 中 两 个 指定 的 索引 号 之 间 的 字符 
oLowerCase0 字符 串 转换 为 小 写 

oString() 返回 字符 串 

oUpperCase() 字符 串 转 换 为 大 写 
lvalueofOD) 返回 指定 字符 串 对 象 的 原始 值 
lincludes 返回 布尔 值 ， 表 示 是 否 找到 了 参数 字符 串 
startsWith 返回 布尔 值 ， 表 示 参 数字 符 串 是 否 在 原 字符 串 的 头 部 

ndsWith 返回 布尔 值 ， 表 示 参 数字 符 串 是 否 在 原 字符 串 的 尾部 
Irepeat 返回 一 个 新 字符 串 ， 表 示 将 原 字符 串 重复 n 次 
lpadStart 如 果 某 个 字符 串 不 够 指定 长 度 ， 会 在 头 部 补 全 

adEnd 如 果 某 个 字符 串 不 够 指定 长 度 ， 会 在 尾部 补 全 
ImatchAll 返回 一 个 正则 表达 式 在 当前 字符 串 的 所 有 匹配 


2.9 4 千 


本 章 主要 对 TypeScript 的 基本 语法 进行 了 详细 介绍 ， 其 中 涉及 很 多 核心 概念 ， 如 变量 、 标 
识 符 、 参 数 、 函 数 以 及 数据 类 型 。 数 据 类 型 分 为 值 类 型 和 引用 类 型 ， 它 们 是 存在 不 少 差异 的 ， 
必须 理解 其 本 质 。 

本 章 是 非常 重要 的 知识 点 ， 是 理论 基础 。 要 想 学 好 TypeScript 语言 ， 必 须 先 掌握 好 该 语言 
的 基本 语法 ， 才 能 由 浅 入 深 地 继续 学 习 后 面 的 章节 。 

这 一 章 涉 及 不 少 关于 函数 、 类 、 接 口 和 数值 等 的 知识 点 ， 将 在 后 续 章节 进行 详细 说 明 。 
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上 一 章 对 TypeScript 的 基本 语法 进行 了 阐述 ,让 读者 对 TypeScript 的 数据 类 型 、 变 量 的 声 
明 方式 、let 和 var 在 作用 域 上 的 区 别 等 知识 点 有 了 初步 的 掌握 。 其 中 部 分 示例 涉及 流程 控制 。 
本 章 将 对 TypeScript 的 流程 控制 进行 详细 介绍 。 

通过 本 章 的 学 习 , 可 以 让 读者 掌握 如 何 通 过 流程 控制 语句 来 改变 程序 运行 的 顺序 。 流 程控 
制 是 任何 一 门 语言 必须 掌握 的 知识 点 。 在 声明 式 的 编程 语言 中 , 流程 控制 指令 是 指 会 改变 程序 
运行 顺序 的 指令 ， 可 能 是 运行 不 同位 置 的 指令 ， 或 是 在 多 段 程序 中 选择 一 个 运行 。TypeScript 
语言 所 提供 的 流程 控制 指令 主要 有 以 下 几 种 : 


@ 无条件 分 支 指 令 ， 继 续 运行 在 其 他 位 置 的 一 段 指令 ， 例 如 TypeScript 语言 的 goto 指 
令 。 

@ ”条件 分 支 指 令 ， 若 特定 条 件 成 立时 ， 运行 一 段 指令 ,例如 TypeScript 语言 的 证 指令 。 

@ ”循环 指令 ， 运 行 一 段 指令 若干 次 ， 直 到 特定 条 件 成 立 为 止 ， 例 如 TypeScript 语言 的 
for 指令 。 

@ ”执行 子 程序 指令 , 运行 位 于 不 同位 置 的 一 段 指令 , 但 完成 后 会 继续 运行 原来 要 运行 的 
指令 。 

@ 无条件 的 终止 指令 ， 停 止 程序 ， 不 运行 任何 指令 。 


本 章 主要 涉及 的 知识 点 有 : 


@ 条 件 判 断 : 学 会 f.…else 和 switch 等 条 件 判断 控制 的 语法 以 及 用 途 。 
@。 循环 流程 : 学 会 for、while 等 基本 循环 控制 的 语法 以 及 用 途 。 
®@ break 和 continue 的 区 别 : 掌握 在 循环 体 中 break 和 continue 的 区 别 。 


画 本 章 内 容 用 到 了 函数 的 部 分 语法 ， 关 于 函数 的 具体 用 法 将 在 第 5 章 介绍 。 


本 .1 条 件 判断 


我 们 知道 ， 现 实生 活 中 很 多 事物 在 不 同 的 条 件 下 会 有 不 同 的 结果 ， 比 如 入 生 , 往往 选择 很 
重要 ,在 人 生 的 分 又 路 口 ， 一 个 人 如 何 选 择 往往 决定 其 后 续 的 发 展 轨 迹 。 一 个 程序 的 运行 也 是 
如 此 ， 在 不 同 的 条 件 下 需要 执行 不 同 的 操作 ， 这 也 是 程序 的 魅力 所 在 ， 只 要 设计 合理 ， 就 可 以 
根据 实际 情况 执行 合理 的 逻辑 。 在 某 种 程度 上 来 说 ， 程 序 的 “智能 ”特征 依赖 于 条 件 判断 。 

条 件 语句 是 一 种 根据 条 件 执行 不 同 代 码 的 语句 , 如 果 条 件 满足 就 执行 一 段 代 码 ， 否 则 执行 
其 他 代码 。 条件 语 句 表达 的 意图 可 以 理解 为 对 某 些 事 的 决策 规则 或 者 表达 某 种 关系 即 “如 果 
什么 ， 则 什么 ”。 

例如 ,公司 的 员工 需要 请 假 ， 那 么 每 个 公司 都 会 制定 一 套 请 假 的 流程 来 确定 请 假 的 规则 。 
例如 ,首先 员工 发 起 请 假 申请 , 然后 员工 的 主管 进行 审批 ,审批 后 会 根据 条 件 判断 来 确定 下 一 
步 的 审批 人 是 谁 ， 如 果 请 假 天 数 大 于 3 天 ， 由 于 请 假 天 数 比较 多 , 请 假 单 会 在 主管 审批 后 流转 
到 总 经 理 处 进行 审批 ， 总 经 理 处 审批 后 再 流转 到 HR 处 审批 ， 以 便 做 好 考勤 工作 ; 如 果 请 假 天 
数 小 于 等 于 3， 那 么 请 假 单 会 在 主管 审批 后 流转 到 HR 处 进行 审批 ，HR 审批 通过 后 ， 流 程 结 
束 。 具 体 的 流程 示意 如 图 3.1 所 示 。 


图 3.1 请 假 流 程 图 
如 果 用 TypeScript 语言 来 构建 一 个 请 假 流程 的 程序 ， 就 必须 用 到 条 件 判断 的 相关 知识 。 正 
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是 有 了 条 件 判断 ， 从 而 使 得 程序 可 以 根据 规则 来 灵活 处 理 现实 问题 。 在 TypeScript 语言 中 , 实 
现 条 件 判断 的 方法 有 多 种 ， 例 如 if、if...else 和 switch。 下 面 分 别 对 这 几 种 做 详细 说 明 。 


3 


程序 实现 条 件 判断 最 简单 的 就 是 if, 在 TypeScript 语言 


if、 if...else 


， 于 语法 和 JavaScript 基本 一 致 。 


为 了 直观 了 解 f 语 法, 假设 有 一 个 函数 getGrade,， 其 中 有 一 个 数值 类 型 的 参数 money， 如 果 参 
数 money 大 于 8000， 那 么 等 级 为 A; 如 果 参 数 money 大 于 3500 且 小 于 等 于 8000， 那 么 等 级 
为 B;: 如 果 参 数 money 大 于 900 且 小 于 等 于 3500， 那 么 等 级 为 C， 其 他 情况 等 级 为 D。 具 体 
内 容 如 代码 3-1 所 示 。 


【代码 3-1】 函数 getGrade 用 if 实现 代码 : ts001.ts 


06 
07 
08 
09 
10 
11 
12 
3 
14 
15 


23 


J/ 

* 根据 money 参数 给 出 等 级 A, B,C,D 

* @param money 

* @returns 字符 串 A,B,C,D 

区 尖 

function getGrade (money: number) { 
if (money > 8000) { 


return "A"; 


if (money <= 8000 && money>3500) { 


return "“B"; 


if (money <= 3500 && money>900) { 


return "C"; 
return "“D"; 


let a = getGrade (8002); 


console.1log(a); //a 
a = getGrade (5000); 
console.1log(a); //B 
a = getGrade (3200); 
console.1og(a); iC 


必 导 | 一 般 来 说 ， 证 语句 所 判定 的 条 件 必须 是 全 集 ， 和 否则 可 能 会 出 现 异 常 。 


另 一 个 常用 的 条 件 判 断 为 让 .… else。 还 以 上 面 的 逻辑 为 例 ， 这 次 将 让 换 成 让 
码 ， 具 体内 容 如 代码 3-2 所 示 。 


.…else 进行 编 
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【代码 3-2】 函数 getGrade 用 if .… else 实现 代码 : ts002.ts 


01 /** 


02 * 根据 money 参数 给 出 等 级 A,B,C,D 
03 * @param money 
04 * @returns 字符 串 A,B,C,D 


05 区 

06 function getGrade (money: number) { 

07 if (money > 8000) { 

08 return "A"; 

09 } 

10 else if (money <= 8000 && money>3500) { 
时 return "B7”7 

4 } 

13 else if (money <= 3500 && money>900) { 
14 return "C"7 

YS } 

16 else 

有 return "D"; // 只 有 一 条 语句 ， 那 么 可 以 省 略 {} 
18 } 

19 let a = getGrade (8002); 

20 console.1log(a); //A 

21 a = getGrade (5000); 

和 2 console.1log(a) 7 //B 

之 33 a = getGrade (3200) 7 

24 console.1log(a) 7 de 


| 让 或 者 el 


se 下 如 果 只 有 一 条 语句 ,那么 可 以 省 略 {}, 但 是 建议 保留 , 提高 代码 的 可 读 性 。 


另外 一 个 需要 六 


E 意 的 是 ， 在 条 件 判 定语 句 中 ， 不 要 出 现 无 法 到 达 的 语句 ， 如 下 面 的 代码 


3-3 中 08 行 代码 永远 无 法 执行 。 默 认 情 况 下 此 代码 不 会 报错 ， 需 要 指定 TypeScript 中 的 
--allowUnreachableCode 编译 选项 为 false， 用 于 检测 此 类 错误 。 


【代码 3-3】 函数 ferror 实现 代码 : ts003.ts 


01 function 


ferror(a) { 


02 iF (a) 

03 return true; 

04 } 

05 else { 

06 return false; 

07 } 

08 return 1; // 无 法 到 达 的 代码 
09 | 
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第 1 章 已 经 简单 介绍 了 如 何 安装 开发 工具 Visual Studio Code， 并 学 会 用 命令 tsc 对 
TypeScript 文件 进行 编译 ， 但 并 未 介绍 tsc 命令 的 编译 选项 如 何 开 启 。 下 面 就 在 Visual Studio 
Code 工具 中 对 如 何 配置 tsc 的 编译 选项 进行 说 明 。 

在 Visual Studio Code 中 ,一 般 来 说 ,一 个 TypeScript 项 目 就 对 应 一 个 文件 夹 。 首 先 用 Visual 
Studio Code 打开 charpter3 文件 夹 ， 新 建 一 个 tsconfig.json 文件 。 如 果 一 个 目录 里 存在 一 个 
tsconfig.json 文件 , 那么 编译 器 就 认为 这 个 目录 是 TypeScript 项 目的 根 目录 。tsconfig.json 文件 
中 指定 了 用 来 编译 这 个 项 目的 若干 配置 和 编译 选项 。tsconfig.json 的 具体 配置 如 图 3.2 所 示 。 


{) tsconfigjson x 
1 1{ 
"compilerOptions": { 
3 "module": "commonjs", 
4 "target": “es5” 
s 
6 1V "noImplicitAny": true, 
7 //"removeComments": true, 
8 //"preserveConstEnums": true, 
9 "sourceMap": true 
198 }, 
bt "exclude": [ 
12 "node_modules" 
13 了 
14 } 


3.2 tsconfigjson 配置 

不 带 任何 参数 的 情况 下 调用 tsc 命令 , 编译 器 会 从 当前 目录 开始 去 查找 tsconfig,json 文件 ， 
如 果 找 不 到 就 逐 级 向 上 搜索 父 目录 。 当 找到 tsconfigjson 时 就 会 解析 它 ， 并 按照 相应 配置 去 编 
译 。 

在 tsconfigjson 文件 中 ， 在 "compilerOptions" 节 点 下 配置 "allowUnreachableCode":false 来 
开启 --allowUnreachableCode 编译 选项 。 

然后 在 Visual Studio Code 中 新 建 一 个 文件 并 命名 为 ts003.ts， 其 内 容 如 代码 3-3 所 示 。 这 
时 Visual Studio Code 编辑 器 会 提示 检测 到 不 可 达 的 代码 (unreachable code detected.) ， 具 体 
提示 如 图 3.3 所 示 。 


Unreachable code detected. ts(7027) 


SEE 7/ 无 


加 


ESowvnmwPwun 也 


图 3.3 Visual Studio Code 检测 到 不 可 达 代 码 提示 界面 
另外 一 种 方法 是 ， 也 可 以 用 tsc 命令 来 编译 代码 ， 查 看 代码 是 否 有 不 可 达 的 代码 段 。tsc 
命令 为 : 


tsc --allowUnreachableCode false .\ts003.ts 
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将 此 命令 在 Visual Studio Code 中 的 terminal 终端 中 执行 时 ， 编 译 器 也 会 告知 同样 的 错误 ， 
具体 如 图 3.4 所 示 。 


PS C:\Src\charpter3> ts¢ --allowUnreachableCode false .\tse03.ts 
ts963.ts:8:5 - error T57927: Unreachable code detected 


Found 1 error. 


PS C:\src\charpter3> -~-allowUnreachableCode true .\tse83.ts 
PS C:\Src\charpter3> 


3.4 Visual Studio Code 用 tsc 命令 编译 界面 


从 上 面 的 两 种 方法 对 比 来 看 ， 第 一 种 方法 通过 配置 tsconfig.json 文件 会 更 加 方便 ， 可 以 让 
编辑 器 自动 检测 错误 。 第 二 种 方法 只 能 在 调用 tsc 编译 的 时 候 才 能 发 现 问题 。 
这 个 特性 能 捕获 到 的 一 个 更 不 易 发 觉 的 错误 是 在 return 语句 后 添加 换行 语句 而 导致 的 检 
测 到 不 可 及 的 代码 。 因 为 TypeScript 代码 最 后 会 编译 成 JavaScript 执行 ， 而 JavaScript 会 自动 
在 行 末 结 束 return 语句 。 换 句 话说 ， 如 果 在 return 行 末 没 有 其 他 语句 ， 那 么 会 自动 添加 分 号 
(; ) ， 进 而 结束 函数 体 。return 后 面 的 代码 相当 于 永 不 执行 ， 变 成 了 一 个 无 法 可 达 的 代码 区 
域 ， 如 代码 3-4 所 示 。 


【代码 3-4】 函数 ferror_return 实现 代码 : ts004.ts 


01 function ferror return () { 


02 return // 换行 导致 自动 插入 分 号 ; 
03 
04 x: "string"  // 检测 到 不 可 及 的 代码 
05 
06 
3.1.2 ” 岩 套 if 


当 某 些 条 件 判 断 需 要 判定 的 参数 有 多 个 ， 或 者 逻辑 比较 复杂 时 ， 可 能 单 层 if 不 能 很 好 地 
解决 问题 ， 这 时 需要 对 让 语句 进行 嵌 套 来 解决 。 代 码 3-5 给 出 了 嵌 套 if 的 示例 。 


【代码 3-5】 函数 getGrade 嵌 套 if 实现 代码 : ts005.ts 


01 ye 

02 * Sex 枚 举 

03 萤 浙 

04 enum Sex { 

05 Man = 1， 

06 Female = 2, 
07 } 

08 六 


09 * 根据 money 和 sex 参数 给 出 等 级 A, B,C,D 


J2 


10 
1 
12 
3 
14 
5 
16 
17 
18 
19 
20 
这 潮 
22 
23 
24 
25 
26 
2 
28 
2 
30 
3 
32 
33 
34 
35. 
36 
37 
38 
39 
40 
41 
42 
43 
44 
45 
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* @param money 
* @param sex 
* @returns 字符 串 A,B,C,D 
ei 
function getGrade (money:number, sex:Sex){ 
if(sex === Sex.Man){ 
if (money > 8000) { 
return "A"; 
4 


else if (money <: 


8000 && money>3500) { 
return "B"7 


1 


else if (money < 


3500 && money>900) { 
rotrr men 
} 
else 
return "D"7 
} 
elsel{ 
if (money > 7000) { 
return "A"; 
else if (money <: 


7000 && money>3000) { 
return "B"; 

} 

else if (money <: 


3000 && money>800) { 
return "C"; 

} 

else 


return "D"; 


} 

let a = getGrade (7100,Sex.Man); 
console.log(a) 7 //B 

a = getGrade (7100,Sex.Female); 
console.1og(a); //a 


六 if 骨 夺 不宜 过 多 ， 一 般 来 说 超过 2 层 代码 的 可 读 性 就 会 大 大 降低 。 | 


3.1.3 Switch 
除了 证 和 让 ... else 以 外 ，switch 也 可 以 实现 条 件 判 断 ， 但 要 注意 switch 语句 中 的 每 一 个 
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case 表达 式 类 型 必须 与 switch 表达 式 类 型 相 匹配 ， 和 否则 会 报错 。 
另外 ，switch 中 的 case 语句 块 如 果 有 逻辑 语句 ， 不 是 空 的 ， 那 么 必须 用 break 结尾 ， 否 则 
程序 会 贯穿 case 区 域 ， 导 致 结果 错误 。 代 码 3-6 给 出 了 switch 的 基本 用 法 。 


【代码 3-6】 函数 swithDemo1 实现 代码 : ts006.ts 


01 Ti 

02 * 判断 奇偶 数 

03 * @param num 

04 * @returns 字符 串 

05 pd 

06 function swithDemol (num:number){ 
07 let ret = ""; 

08 switch (num % 2){ 

09 case 0:{ 

10 ret = "偶数 "; 

11 break; // 在 非 空 情况 下 break 不 能 少 ， 否 则 程序 会 贯穿 此 case 区 域 
2 } 

13 case 1: { 

14 ret = "奇数 "; 

a break; 

16 } 

7 } 

18 return ret; 

19 3 

20 let a = swithDemol (201); 

21 console.log(a); // 奇 数 
22 a = SwithDemol (202) 7 

23 console.log(a); // 偶 数 


在 代码 3-6 中 ， 如 果 11 行 处 将 break 去 掉 或 者 注释 掉 ， 那 么 swithDemol (202) 返回 " 奇 
数 "， 而 不 是 "偶数 "。 缺 少 break 程序 不 会 跳出 switch 的 个 块 ， 而 是 继续 执行 case 1:{ }， 也 就 
是 将 ret 重新 赋值 为 "奇数 "。 


TypeScript 现 支持 对 当 switch 语句 case 中 出 现 贯穿 时 报错 的 检测 。 这 个 检测 默认 是 关闭 
i 的 , 可 以 使 用 --noFallthroughCasesInSwitch 启用 。 


参考 前 面 的 tsconfig.json 编译 项 配置 , 用 "noFallthroughCasesInSwitch":true 开启 配置 。 那 
么 在 Visual Studio Code 中 打开 ts006.ts 文件 时 ， 如 果 将 11 行 的 break 注释 掉 ， 则 编译 器 会 提 
示 穿 透 switch 语句 中 的 case 错误 〈Fallthrough case in swith.) 。 检 测 提示 界面 如 图 3.5 所 示 。 
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TSts006ts x 


1 
6 function swithDemol(num:number){ 


7 let Pet 一 ”= 
8 swit Fallthrough case in switch. ts(7029) 
case a:t{ 
19 ret =" 个 数 "; 
11 7Vbreak3// 丰 F 不 能 罗 。 ECSSEE 基 


13 case 1: { 


14 ret = "奇数 "; 
15 break; 

16 } 

17 

18 return ret; 

19 } 


28 let a = swithDemo1(291); 


3.5 Visual Studio Code 穿 透 switch 提示 界面 


另外 ，JavaScript 语言 中 没有 返回 值 的 代码 分 支 会 隐 式 地 返回 undefined。 这 个 特征 往往 会 
导致 程序 不 能 按照 预期 执行 。 现 在 TypeScript 编译 器 可 以 将 这 种 方式 标记 为 隐 式 返回 ， 虽 然 
TypeScript 编译 器 对 于 隐 式 返回 的 检查 默认 是 被 关闭 的 , 但 是 可 以 使 用 --noImplicitReturns 来 启 
用 。 代 码 3-7 给 出 了 检测 隐 式 返回 undefined 的 示例 。 

【代码 3-7】 函数 freturn 隐 式 返回 代码 : ts007 .ts 
01 ” function freturn(x) { // 错误 : 不 是 所 有 分 支 都 返回 了 值 


02 (Yt 

03 return false; 

04 } 

05 // 隐 式 返回 了 undefined 
06 |} 


在 tsconfig.json 文件 中 用 "noImplicitReturns":true 开启 编译 选项 , 那么 在 Visual Studio Code 
中 打开 ts007.ts 文件 时 编译 器 会 提示 不 是 所 有 路 径 返 回 值 的 错误 (Not all code paths return a 
value.) 。 检 测 提示 界面 如 图 3.6 所 示 。 


TS ts007.ts x 
工 Not all code paths return a value. ts(7030) 


function freturn(x: any): boolean 


function freturn(x)《 // 错误 : 不 是 所 有 分 支 都 惨 回 了 值 . 
if (x) 的 
return false; 


// 隐 式 返回 了 undefined 


} 
3.6 ”Visual Studio Code 提示 不 是 所 有 路 径 返 回 值 界 面 
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循环 控制 语句 可 以 重复 调用 某 段 代码 ， 直 到 满足 某 一 条 件 退出 或 者 永 不 退出 ， 无 限 循环 。 
一 般 在 程序 中 除了 条 件 判定 以 外 , 循环 语句 的 使 用 率 也 是 非常 高 的 , 因此 我 们 必须 掌握 循环 的 
基本 用 法 。 

在 现实 生活 中 ,循环 控制 的 例子 也 随处 可 见 。 例 如 ， 上 学 的 时 候 ， 老 师 上 课 前 用 花 名 册 点 
名 , 看 有 没有 同学 缺勤 。 学 生花 名 册 是 一 个 包含 学 生 学 号 和 姓名 等 信息 的 列表 。 老 师 从 第 一 个 
人 开始 ， 逐 一 向 下 进行 点 名 ， 来 上 课 的 同学 答 “ 到 ” 即 可 。 

老师 逐一 循环 对 花 名 册 中 的 每 个 同学 进行 点 名 的 过 程 实际 上 就 可 以 看 作 是 一 个 循环 的 流 
程控 制 过 程 。 老 师 要 从 花 名 册 这 个 列表 中 查询 出 符合 特定 条 件 〈 缺 勤 的 ) 的 同学 ， 必 须 借助 循 
环 和 条 件 判 断 才 能 完成 。 

另外 ， 我 们 的 时 钟 计时 也 可 以 看 作 是 一 个 循环 ， 以 分 钟 数 和 小 时 数 为 例 ， 分 钟 数 每 隔 60 
秒 加 1， 然 后 判断 分 钟 数 是 否 为 60， 如 果 是 ， 那 么 小 时 数 加 1， 同 时 置 分 钟 数 为 0， 重新 进行 
计时 ， 等 60 秒 后 分 钟 数 再 加 1， 如 此 循环 ， 如 果 不 是 ， 那 么 再 过 60 秒 后 分 钟 数 加 1， 如 此 循 
环 ， 如 图 3.7 所 示 。 


小 时 数 +1( 分 钟 归 
0) 


3.7 时钟 计时 循环 流程 图 
在 TypeScript 中 循环 分 为 确定 循环 和 不 确定 循环 ， 常 用 的 循环 语句 有 for 和 while 等 。 
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3.2.1 for 


在 循环 语句 中 ,迭代 次 数 是 确定 /固定 的 循环 称 为 确定 循环 。for 循环 一 般 来 说 是 一 个 确定 
循环 的 实现 。 在 TypeScript 中 ， 循 环 中 的 for 语法 和 JavaScript 一 致 ， 下 面 给 出 一 个 数组 
testArray， 通 过 循环 将 其 各 个 元 素 打印 出 来 。 代 码 3-8 给 出 了 for 的 基本 用 法 。 


【代码 3-8】 函数 forDemo1 实现 代码 : ts008.ts 


01 WW 

02 * for 语法 演示 

03 

04 function forDemol(){ 

05 let testArray = [20, 30, 40, 50]; 

06 for (let i = 0; i < testArray.length; i ++) { 
07 console.log (testArray[i]); 

08 } 

09 } 

10 forDemol (); AAAE2030401050 


在 代码 3-8 中 05 行 声明 了 一 个 名 为 testArray 的 数组 , 关于 数组 的 具体 语法 , 参见 第 4 章 。 
testArray 数组 有 4 个 元 素 ， 分 别 是 20、30、40 和 50。 由 于 数组 是 一 个 可 变 长 度 的 结构 ， 要 想 
打印 出 其 中 的 每 个 元 素 ， 就 必须 利用 循环 才能 完成 。 


二 for 循环 中 用 let 进行 变量 i 声明 ， 不 要 用 var， 防 止 污染 外 部 作用 域 中 的 变量 。 | 


如 果 for 循环 中 循环 的 次 数 较 多 ， 上 面 代 码 中 的 06 行 可 以 进行 优化 ， 从 而 提高 执行 效率 。 
由 于 testArray.length 在 每 次 循环 的 时 候 都 要 重新 计算 一 下 ， 因 此 可 以 用 一 个 变量 暂 存 这 个 
testArray.length 的 值 ， 这 样 循环 的 效率 就 会 提高 ， 改 进 的 代码 如 代码 3-9 所 示 。 


【代码 3-9】 函数 forDemo1 改进 代码 : ts009.ts 


01 Pa 

02 * for 语法 改进 版 演示 

03 i 

04 function forDemol(){ 

05 let testArray = [20, 30, 40, 50]; 
06 let len = testArray.length; 

07 for (let i = 0; i < len; i ++) { 
08 console.log (testArray[i]); 
09 » 

10 } 

2 forDemol1 (); /20 30. ‘40 ° 50 


在 TypeScript 中 ， 循 环 中 也 支持 for..in 语法 。for..in 循环 是 对 具体 对 象 的 键 key 和 属性 
进行 循环 〈 不 会 忽略 属性 ) 。 常 用 于 打印 对 象 或 集合 中 键 值 对 中 的 键 名 或 是 数组 的 下 标 及 属性 
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值 ， 代 码 3-10 给 出 了 for..in 的 用 法 。 


【代码 3-10】 for..in 循环 示例 代码 : ts010.ts 
01 议和 
02 * for. . .in 语法 演示 
03 要 
04 interface Array<T>{ 
05 Prop: string; 
06 } 
07 function forDemol(){ 
08 let testArray = [20, 30, 40, 50]; 
09 testArray.prop = "propValue"; // 扩 展 属性 
10 let len = testArray.length; 
8 for (let item in testArray) { 
Fl console.log (item); A O12 3 prop 
13 console.log(testArray[item]); //20 30 40 50 propValue 
14 : 
15 } 


16 forDemol (); 


在 上 面 的 代码 3-10 中 ，04~06 行 用 interface Array<T> 对 数组 泛 型 定义 了 一 个 prop 字符 型 
的 属性 ， 为 了 演示 for..in 可 以 打印 出 对 象 的 属性 。 这 一 段 涉及 的 知识 点 有 数组 、 泛 型 和 接口 
等 ， 超 出 本 章 范围 。 这 些 知 识 点 会 陆续 在 后 续 章 节 进 行 介绍 。 

在 TypeScript 中 还 有 一 个 for...of 循环 ， 是 对 具体 对 象 中 的 值 进行 循环 ， 而 不 是 对 键 key 
的 循环 ， 并 且 忽 略 对 象 属性 。 代 码 3-11 给 出 了 for..of 的 用 法 。 


【代码 3-11】 for...of 示例 代码 : ts011.ts 


01 We 

02 * for...in 语法 改进 版 演示 

03 a 

04 interface Array<T>{ 

05 Prop: string; 

06 } 

07 function forDemol(){ 

08 let testArray = [20, 30, 40, 50]; 

09 testArray.prop = "propValue"; // 扩 展 属 性 
10 let len = testArray.length; 

天 下 for (let item of testArray) { 

12 console.log (item); //20. 330 40 50 
13 | 

14 //console.log (item); //var item 可 以 打印 出 prop 
35 } 


16 forDemol1 (); 
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必 寺 也 可 以 用 for 实现 无 限 循环 ， 即 for(:)。 | 


3.2.2 while 


for 循环 一 般 用 于 有 限 循 环 中 ， 循 环 的 迭代 次 数 往往 固定 。 在 现实 生活 中 ， 有 些 时 候 我 们 
不 知道 循环 何 时 退出 ， 循 环 中 的 迭代 次 数 不 确 定 或 未 知 时 可 以 使 用 不 确定 循环 while 和 
do...while 实现 。 

以 现实 中 的 例子 来 说 ， 假 如 现在 已 经 是 晚上 11 点 了 ， 我 们 从 网 站 上 下 载 一 个 非常 大 的 视 
频 文件 ， 由 于 下 载 的 速度 是 时 刻 变 化 的 , 没 必 要 一 直 等 待 它 下 载 完成 后 人 工 关闭 电脑 。 此 时 可 
以 设置 一 个 任务 ， 在 此 文件 下 载 完 成 后 自动 关闭 电脑 。 

这 个 过 程 实际 上 可 以 用 while 循环 来 解决 下 载 文件 完成 后 自动 关闭 电脑 的 问题 。 模 拟 代码 
如 代码 3-12 所 示 。 

【代码 3-12】 while 实现 whileShutDownPC 代码 : ts012.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
昌江 
2 
3 
14 
5 


/** 
* while 语法 演示 
Cah 
function whileShutDownPC(){ 
let percent: number = 0; 
while (percent<100) { 
console.log (percent+"%"); // 当 前 进度 
percent++; 
} 
shutdownPc () 7? 
function shutdownPc() { 
console.1o0g ("执行 关闭 电脑 操作 ") ; 
} 
whileShutDownPC (); 


必 寺 | while 循环 体 中 的 代码 可 能 不 执行 。 | 


3.2.3 do...while 


do...while 循环 类 似 于 while 循环 , 只 是 do...while 循环 不 会 在 第 一 次 循环 执行 时 评估 条 件 。 
将 代码 3-12 中 的 while 代码 改 成 do...while 的 代码 ， 如 代码 3-13 所 示 。 


【代码 3-13】 do...while 实现 whileShutDownPC 代码 : ts013.ts 


01 


/* 


79 


TypeScript 实战 


02 
03 
04 
05 
06 
07 
08 
09 
10 
Em 
12 
13 
14 
15 
16 


* do.. .while 语法 演示 
g/ 
function whileShutDownPC ()1{ 
let Percent: number = 0; 
do 1{ 
console.log (percent + "%"); 
percent++; 
} 
while (percent < 100); 
shutdownPc (); 
于 
function shutdownPc() { 
console.1og(" 执 行 关闭 电脑 操作 ") ; 
whileShutDownPC () 


// 当 前 进度 


必 却 do..while 循环 体 中 的 代码 至 少 执行 一 次 。 


件 情 况 下 中 断 循 环 中 的 欠 代 ， 然 后 继续 循环 中 的 下 一 个 迭代 ， 循 环 并 未 退出 。break 的 基本 用 


break 和 continue 


在 无 限 循 环 中 ， 如 果 想 跳出 循环 ， 就 要 借助 break。break 和 continue 经 常 和 循环 语句 一 起 
使 用 ， 用 于 更 好 地 控制 逻辑 。 
break 语句 可 用 于 跳出 循环 ， 并 退出 所 在 的 循环 体 。continue 语句 可 以 在 出 现 了 指定 的 条 


法 如 代码 3-14 所 示 。 
【代码 3-14】 break 语句 跳出 循环 示例 代码 : ts014.ts 
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01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
下 下 


/** 
* break 语法 演示 
区 人 
function beakDemol (){ 
let num:number = 100; 
while (true) { 
//console.1og (num); 
if(num == 108){ 
console.1log("break"); 
break; 
上 


mum++7 
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1 } 

14 console.1log (num); //108 
由 } 

16 beakDemol (); //108 


代码 3-14 定义 了 一 个 beakDemol 函数 ， 函 数 体内 用 while(true) 创 建 了 一 个 无 限 循环 ， 如 
果 不 用 一 个 条 件 来 中 断 循环 ,那么 此 函数 将 是 一 个 死 循环 ,如 果 直 接 在 浏览 器 中 运行 ,会 导致 
浏览 器 卡 死 。 

为 了 在 符合 某 一 个 条 件 的 情况 下 跳出 循环 体 , 这 里 用 条 件 判 断 语句 来 实现 。 我 们 初始 化 一 
个 数值 型 的 变量 num 为 100， 循 环 体内 的 末尾 递增 加 1， 然 后 再 次 循环 。 当 num 的 值 为 108 
的 时 候 ， 用 break 语句 退出 循环 while， 执 行 14 行 的 console.log(num) 语 句 ， 打 印 出 结果 。 

当 num 的 值 小 于 108 的 时 候 ，while 循环 体 中 大 的 执行 路 径 为 四 一 @ 一 四 循环 。 当 num 
的 值 等 于 108 的 时 候 ， 执 行 @ 处 的 break 语句 ， 直 接 退 出 while 循环 ，break 后 面 循环 体内 的 代 
码 将 不 执行 ， 即 执行 路 径 为 @ 一 四 。 这 个 基本 过 程 可 以 用 图 3.8 来 说 明 。 


pr 
* break 语 法 演示 
二 
function beakDemol(){ 
let num:number = 186; 


li while (true) { 


if(num == 198){ 
console.1log(", 
break; 


} 
console.log(num);//188 @ 


6 beakDemo1(); 
7 


3.8 ”break 中 断 循环 示意 图 


continue 语句 跳 过 当前 迭代 中 的 后 续 语句 ， 并 将 流程 控制 调整 到 循环 的 开头 。 与 break 语 
名 不 同 ，continue 不 会 退出 循环 。 它 终止 当前 达 代 并 开始 后 续 迭 代 。continue 语句 在 循环 体 中 
的 基本 用 法 如 代码 3-15 所 示 。 


【代码 3-15】 continue 语句 示例 代码 : ts015.ts 


Oe 

02 * continue 语法 演示 

03 人 

04 function continueDemo2(){ 
05 let num:number = 100; 
06 while (num<200) { 
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07 numt++; 

08 if(num == 108){ 

09 console.log ("continue"); 

10 continue; 

EL } 

El console.1og (num); //100 ... 199, 缺少 108 
EE ); 

14 console.1og (num); //200 

EE } 

16 continueDemo2 (); //200 


且 元 车 将 07 行 num+t+ 移 动 到 11 行 之 后 ， 则 此 循环 就 是 一 个 死 循 环 ， 永 不 退出 。 | 


当 num 的 值 不 等 于 108 的 时 候 ，while 循环 体 中 大 的 执行 路 径 为 四 一 @ 一 中 循环 。 当 num 
的 值 等 于 108 的 时 候 , 执行 @@ 处 的 continue 语句 ,但 不 退出 while 循环 ,只 是 此 次 不 执行 continue 
后 面 循环 体内 的 代码 而 已 ， 也 就 是 不 执行 @ 处 的 console.log(num)， 即 再 次 循环 ， 由 于 108 仍 
然 小 于 200， 条 件 成 立 ， 继 续 执行 @ 处 的 num++， 执 行路 径 为 @) 一 由 。 

因此 ，continueDemo2 中 循环 体 将 依次 打印 出 的 100 到 199 中 唯 独 缺少 108， 当 num 等 于 
108 的 时 候 打印 出 了 “continue”。 这 个 基本 过 程 可 以 用 图 3.9 来 说 明 。 


* continue 语 法 演示 
=/ 
function continueDemo2(){ 
let num:number = 196; 
5 @ while (numczee) { 
7 


4 numH+3 


if(num == 16B){ 
consoleJlog("continue”); 
@ continyé; 
} 
@ comsafe.1og(num);//16e ... 199 缺少 198 


console. log(num);//260 


continueDemo2();//266 


图 3.9 continue 中 断 循环 示意 图 
另外 ， 在 TypeScript 中 continue 还 有 一 个 跳 转 到 标签 的 功能 ， 类 似 于 goto 的 作用 ， 如 代 


码 3-16 所 示 。 
【代码 3-16】 continue 跳 转 到 标签 的 示例 代码 : ts016.ts 
01 /** 
02 * continue 跳 转 到 标签 演示 
03 */ 


04 TorLabell: for (let i = /07 i < 37 tH) 
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05 
06 
07 
08 
09 
10 
本 
2 
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forLabel2 : for (let j = 0; j < 3; j++) { 


if (i == 1 && jj == 1) { 
continue forLabel1;// 中 断 本 次 循环 ， 跳 转 到 04 行 的 forLabel11 继续 执行 
} else { 


Conaole .log ("i Sw 4 4 wt J 


; 


上 


这 种 用 法 在 某 些 特殊 情况 下 可 以 解决 问题 , 但 是 一 般 不 建议 使 用 , 跳 转 到 标签 可 以 任意 打 
乱 执行 顺序 ， 严 重 降低 了 代码 的 可 读 性 。 


3.4 小 结 


本 章 主要 对 TypeScript 语言 中 的 流程 控制 语句 进行 了 阐述 , 让 读者 掌握 条 件 判 断 和 循环 的 
几 种 基本 用 法 。 其 中 , 条件 判断 的 实现 可 以 用 论 证..else 以 及 switch 进行 实现 。 循 环 可 以 用 
for 和 while 实现 ， 其 中 在 循环 体 中 注意 break 和 continue 的 区 别 。 

另外 ， 本 章 也 对 如 何在 Visual Studio Code 中 开启 相关 tsc 编译 选项 进行 了 说 明 。 
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上 一 章 主要 学 习 了 TypeScript 中 的 条 件 判断 和 循环 等 流程 控制 语句 。 本 章 主 要 对 
TypeScript 中 的 数组 和 元 组 两 个 类 型 进行 详细 说 明 。 同 字符 串 和 数值 等 基本 类 型 一 样 ， 数 组 和 
元 组 也 是 程序 设计 中 经 常 使 用 的 类 型 之 一 , 因此 掌握 数组 和 元 组 的 基本 用 法 , 对 于 后 续 我 们 进 
行 实战 开发 具有 很 重要 的 现实 意义 。 

本 章 主要 涉及 的 知识 点 有 : 


@ ”数组 的 基本 概念 和 特征 。 

@ ”数组 元 素 的 访问 、 解 构 和 遍历 : 学 会 通过 下 标 获取 数组 中 的 元 素数 据 以 及 如 何人 遍历 。 
数组 中 的 元 素 和 对 数组 进行 解构 。 

@ ”数组 方法 : 学 会 常用 的 数组 方法 。 

@ ”元 组 的 概念 和 特征 。 

@ ”元 组 元 素 的 访问 、 解构 和 遍历 : 学 会 通过 下 标 获取 元 组 中 的 元 素数 据 ， 以 及 如 何 遍 历 
元 组 中 的 元 素 和 对 元 组 进行 解构 。 

@ 元 组 方法 : 学 会 常用 的 元 组 方法 。 

@ ”迭代 器 和 生成 器 的 基本 用 法 。 


副 本 章 内 容 不 包含 多 维 元 组 。 | 
外. 数组 


本 节 首 先 介 绍 数 组 的 基本 概念 , 理解 这 些 概念 是 学 习 使 用 TypeScript 数组 的 基础 。 了 解数 
组 概念 后 ， 才 能 从 数组 的 原理 中 找到 学 习 的 技巧 。 


4.1.1 数组 的 概念 和 特征 


首先 要 知道 什么 是 数组 。 数 组 即 一 组 数据 ， 它 把 一 系列 具有 相同 类 型 的 数据 组 织 在 一 起 ， 
成 为 一 个 可 操作 的 对 象 。 举 一 个 现实 中 的 例子 ， 当 我 们 在 家 招待 客人 之 前 ， 为 了 办 一 桌 丰盛 的 
饭菜 , 往往 前 一 天 会 去 大 型 超市 采购 物品 , 由 于 要 采购 的 物品 较 多 , 为 了 更 有 条 理 、 防 止 遗 漏 ， 


我 们 会 事先 列 出 一 个 采购 清单 : 
(1) 猪肉 
(2) 鱼 


(3) 是 
(4) 西红柿 


上 面 的 这 个 采购 清单 规律 地 列 出 了 其 内 部 的 数据 ， 而 且 具 有 一 定 的 共性 。 在 TypeScript 
语言 中 , 可 以 称 这 样 一 个 采购 清单 为 数组 。 数 组 对 象 是 使 用 单独 的 变量 名 来 存储 一 系列 有 序 的 
且 同 类 型 的 值 。 

数组 在 程序 中 非常 有 用 ,是 一 种 必须 掌握 的 知识 点 。 数 组 名 (数组 变量 名 ) 是 用 户 定义 的 
数组 标识 符 ， 下 标 用 于 区 分 数组 各 个 元 素 的 数字 编号 。 

那么 数组 有 什么 好 处 呢 ? 同样 在 编程 中 ， 如 果 我 们 有 一 组 相同 数据 类 型 的 数据 ， 例 如 有 
10 个 数字 ， 这 时 如 果 要 用 变量 来 存放 它们 就 要 分 别 使 用 10 个 不 同 的 变量 ， 而 且 要 记 住 这 10 
个 变量 的 名 字 ， 这 会 十 分 麻烦 。 这 时 就 可 以 用 一 个 数组 变量 来 存放 这 10 个 数 ， 简 单 高效 ， 同 
时 数组 的 循环 遍历 也 非常 方便 ， 易 于 进行 批量 操作 。 

利用 好 数组 , 一 方面 可 以 提升 代码 的 可 读 性 ,代码 更 加 简洁 , 一 方面 可 以 提升 批量 操作 的 
效率 。 数 组 可 以 是 一 维 的 ， 也 可 以 是 多 维 的 。 一 般 而 言 ， 常 用 的 是 一 维 数组 和 二 维 数组 。 


医改 TypeScript 同 C# 语 言 一 样 ， 数 组 的 下 标 也 是 从 0 开始 ， 而 不 是 从 1。 | 


在 TypeScript 中 ， 数 组 主要 用 在 以 下 几 个 地 方 : 


@ 数组 作为 函数 参数 : 函数 参数 可 以 是 数组 类 型 的 , 数组 类 型 的 参数 可 以 在 函数 体内 进 
行 循环 人 遍历， 并 处 理 。 

@ ”数组 作为 函数 返回 值 : 允许 函数 返回 数组 ， 从 而 可 以 让 函数 返回 多 个 值 。 

@ 数组 作为 变量 类 型 : 和 基本 的 数据 类 型 一 样 ， 可 以 将 变量 声明 为 数组 用 于 存储 有 
序 的 值 。 


数组 一 般 具 有 如 下 特征 : 


@ 数组 是 相同 数据 类 型 的 元 素 集合 ， 但 是 数据 类 型 可 以 是 任意 的 。 

@。 数组 中 各 元 素 的 存储 是 有 先后 顺序 的 ,它们 在 内 存 中 按照 这 个 先后 顺序 连续 存放 在 一 
起 。 

@ ”数组 元 素 用 整个 数组 的 名 字 和 它 自 己 在 数组 中 的 顺序 位 置 来 表示 。 例 如 ，a[0] 表 示 名 
字 为 a 的 数组 中 的 第 一 个 元 素 ，a[1] 代 表 数 组 a 的 第 二 个 元 素 ， 以 此 类 推 。 
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既然 数组 在 实际 程序 开发 中 这 么 有 用 , 那么 在 TypeScript 中 如 何 进 行 数 组 的 声明 和 初始 化 
呢 ?TypeScript 和 JavaScript 在 数组 的 声明 上 还 是 有 一 定 差异 的 。 虽 然 数 组 的 声明 和 初始 化 可 
以 分 开 处 理 ， 但 是 建议 在 声明 数组 的 时 候 一 并 进行 初始 化 。 

TypeScript 常用 的 声明 数组 和 初始 化 的 方法 有 : 


(1) 在 元 素 类 型 后 面 接 上 []， 表 示 由 此 类 型 的 元 素 组 成 的 一 个 数组 。 数 组 声明 和 初始 化 
的 基本 语法 如 下 : 


let 或 var 数组 名 : 元 素 类 型 [] = [ 值 1, 值 2, ... , 值 N]; 


其 中 ,， 元素 类 型 可 以 是 字符 类 型 、 数 值 类 型 、 布 尔 类 型 ， 也 可 以 是 联合 类 型 和 用 户 自 定义 
的 类 型 。 数 组 可 以 用 [ 值 1, 值 2,.… , 值 N] 来 初始 化 ， 各 个 元 素 用 半角 逗号 分 隔 。 代 码 4-1 给 出 了 
不 同类 型 的 数组 声明 和 初始 化 用 法 。 


【代码 4-1】 数组 声明 和 初始 化 示例 代码 : ts001.ts 


01 
02 
03 
04 
05 
06 
07 


let arrList: string[] = [" 猪 肉 "," 鱼 "," 虾 ", "西红柿 ", "黄瓜 ", "白酒 "] ; 
let arrList2 : number[] = [10,20,30,40]; 

let arrList3 : boolean[] = [true,falsel]; 

let arrList4: any[] = [10, "Jack", true]; 

//let arrList5: object[] = [10, true, "Jack",]; // 错 误 
let arrList6: object[] = [{age :2}, {age:20}]; 

let arrList7: (string | number)[] = [1,"true"]; 


在 代码 4-1 中 , 01 行 用 let arrList: string[] 声 明了 一 个 string 类 型 的 数组 , 数组 名 为 arrList， 
并 将 数组 arrList 初始 化 值 为 [" 猪 肉 "," 鱼 "," 虾 "," 西 红 柿 "," 黄 瓜 "," 白 酒 "]。02 行 声明 了 一 个 
number 类 型 的 数组 ， 并 初始 化 值 为 [10,20,30,40]。04 行 声明 了 一 个 any 类 型 的 数组 ， 可 以 存 
储 任意 值 ， 因 此 可 以 给 该 数组 初始 化 不 同类 型 的 值 [10, "Jack", true]。07 行 声明 了 一 个 联合 类 
型 (string | numbenD 的 数组 ， 这 个 数组 可 以 存储 string 或 者 number 类 型 的 变量 ， 而 不 能 存储 其 
他 不 兼容 的 类 型 ， 除 了 null 和 undefined 。 


object 对 象 在 TypeScript 和 JavaScript 中 是 不 同 的 ， 我 们 不 能 将 字符 类 型 或 数值 类 型 赋值 
给 object 类 型 的 变量 ， 如 代码 4-1 中 05 行 代码 是 错误 的 。 


(2) 使 用 数组 泛 型 Array< 元 素 类 型 >， 表 示 由 此 类 型 的 元 素 组 成 的 一 个 数组 。 数 组 声明 
和 初始 化 的 基本 语法 如 下 : 


let 或 var 数组 名 : Array< 元 素 类 型 > = [ 值 1, 值 2,..., 值 N] ; 


其 中 ,元 素 类 型 可 以 是 字符 类 型 、 数 值 类 型 、 布 尔 类 型 ， 也 可 以 是 联合 类 型 和 用 户 自 定义 
的 类 型 。 代 码 4-2 给 出 数组 泛 型 声明 和 初始 化 数组 的 用 法 。 
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【代码 4-2】 数组 声明 和 初始 化 示例 代码 : ts002.ts 


01 let arrList: Array<string> = [" 猪 肉 ", " 鱼 ", "是 ", "西红柿 ", "黄瓜 ", "白酒 "] ; 
02 let arrList2 : Array<number> = [10,20,30,40]; 

03 let arrList3 : Array<boolean> = [true,falsel]; 

04 let arrList4: Array<any> = [10, "Jack", true]; 

05 //let arrList5: Array<object>= [10, true, "Jack",]; // 错 误 

06 let arrList6: Array<object> = [{age :2}, {age:20}]; 

07 let arrList7: Array<string | number> = [1l,"true"]; 


在 代码 4-2 中 , 用 数组 泛 型 的 方式 重新 实现 了 代码 4-1 中 的 数组 声明 和 初始 化 功能 。 01~03 
行 分 别 用 数组 泛 型 的 方式 声明 了 3 种 类 型 的 数组 。04 行 的 Array<any> 和 any[] 一 样 ， 也 可 以 存 
储 任意 值 类 型 。 这 种 用 法 的 数组 和 后 面 要 说 的 元 组 很 像 ， 但 要 注意 区 别 。 


区 趣 | 用 Array< 元 素 关 型 > 声明 数组 的 时 候 ， 元 素 类 型 不 能 省 略 ， 即 不 多 许 Aray<>。 | 


(3) 使 用 数组 字面 量 ， 数 组 声明 和 初始 化 的 基本 语法 如 下 : 

let 或 var 数组 名 = [ 值 1, 值 2,..., 值 N] ， 

使 用 数组 字面 量 的 方式 构建 数组 , 则 数组 的 元 素 类 型 会 根据 初始 化 的 值 来 确定 。 如 果 数 组 
在 声明 时 未 设置 元 素 类 型 且 只 初始 化 为 空 数组 ， 就 会 被 认为 是 any 类 型 ， 可 以 存储 任何 类 型 
的 数据 。 如 果 未 设置 元 素 类 型 ， 且 初始 化 了 非 空 的 值 , 那么 编译 器 会 根据 初始 化 的 值 来 自动 推 
断 数组 的 类 型 。 代 码 4-3 给 出 了 数组 类 型 推断 的 示例 。 
【代码 4-3】 数组 字面 量 类 型 推断 示例 代码 : ts003.ts 

01 let arrList2 = []; // any[] 


02 arrList2.push (2); 
03 arrList2 = [2,， "猪肉 "，true, { age: 2 }]; 


04 let arrList1l = [1,2,3]; // number[] 

05 let arrList3 = [1,"true"]; //(string | number) [] 
06 arrList3.push (2); 

07 arrList3.push(true); // 布 尔 类 型 不 能 存储 


从 代码 4-3 中 可 以 看 出 ，01 行 “let arrList2 = [];” 用 数组 字面 量 [] 创 建 了 一 个 名 为 arrList2 
的 数组 。 由 于 并 未 指定 元 素 类 型 ， 默 认为 any[]， 因 此 02~03 行 可 以 往 数组 arrList2 中 赋予 不 
同类 型 的 值 。03 行 用 数组 字面 量 [1,2,3] 创 建 了 一 个 数组 arrListl 且 未 指定 元 素 类 型 ， 此 时 由 于 
元 素 的 值 全 部 为 number 类 型 ， 因 此 推断 为 number[]。05 行 的 数组 字面 量 [1,"true"] 让 编译 器 推 
断 数 组 arrList3 类 型 为 (string |numben[] 。 

通常 情况 下 ， 数 组 声明 的 时 候 要 初始 化 ， 否 则 不 能 用 push 等 方法 来 操作 。 代 码 4-4 给 出 
了 只 声明 数组 但 是 未 初始 化 的 情况 ， 结 果 调 用 push 方法 的 时 候 报错 。 如 果 不 确定 数组 的 值 ， 
或 者 需要 动态 地 维护 值 ， 可 以 将 数组 初始 化 为 空 数组 [] ， 这 样 就 可 以 调用 push 等 方法 进行 数 
组 的 动态 维护 了 。 
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【代码 4-4】 数组 声明 和 初始 化 示例 代码 : ts004.ts 


01 let arrList2:Array<any> ; // 未 初始 化 
02 arrList2.push(2); // 初 始 值 是 undefined， 不 能 调用 push 


| 在 声明 数组 时 应 该 进行 初始 化 ， 和 否则 数组 变量 的 初始 值 是 undefined， 后 续 调用 数组 方法 
的 时 候 会 出 现 错误 。 


4.1.3 访问 数组 元 素 

我 们 声明 一 个 数组 的 目的 就 是 为 了 使 用 它 。 数 组 一 般 都 是 具有 多 个 元 素 , 因此 在 实际 使 用 
过 程 中 经 常 需 要 对 数组 中 的 元 素 进行 访问 。 

数组 的 元 素 访问 主要 有 2 种 方法 : 

(1) 通过 下 标 访 问 数组 元 素 

访问 数组 中 的 元 素 , 最 简单 的 就 是 通过 下 标 来 直接 获取 对 应 的 元 素 。 代码 4-5 给 出 了 通过 

下 标 访问 数组 元 素 的 示例 。 
【代码 4-5】 数组 元 素 下 标 访问 示例 代码 : ts005.ts 


01 let arrs = ["a*, "bn "ce"]; // 自 动 推断 类 型 为 string[] 
02 let a = arrs[0]; 

03 console.1log(a) 7 //a 

04 console.log(arrs[5]); // undefined 


数组 的 下 标 是 从 0 开始 编号 的 ， 因 此 可 以 用 arrs[0] 访 问 arrs 数组 中 的 第 1 个 元 素 。arrs[1] 
访问 arrs 数组 中 的 第 2 个 元 素 ， 以 此 类 推 。 


加 | arms5] 数 组 起 办 访问 的 时 候 ， 在 编译 阶段 并 未 提示 错误 ， 在 运行 时 打印 出 undefined。 | 


数组 中 的 元 素 个 数 往往 比较 多 , 而 且 不 是 一 个 常量 , 而 是 一 个 变量 , 可 以 通过 数组 的 length 
属性 获取 长 度 。 通 过 下 标 访问 数组 的 时 候 , 更 常用 的 一 种 情况 是 在 循环 体内 通过 下 标 进行 访问 ， 
这 样 可 以 利用 length 属性 方便 地 获取 数组 的 元 素 个 数 。 代 码 4-6 给 出 了 在 循环 中 通过 下 标 访 
问 数组 的 示例 。 
【代码 4-6】 在 循环 中 通过 下 标 访问 数组 示例 代码 : ts006 .ts 

01 Tot oarre ls [na br esl 

02 let len = arrs.length; // 提高 循环 效率 

03 for (let i = 0; i < len;i++) { 


04 console.log(arrs[i]); ha be 
05 lL 
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吉 在 利用 下 标 进行 数组 循环 时 ,建议 将 获取 数组 长 度 放 在 循环 之 外 ,这 样 不 用 每 次 循环 的 时 
t 候 都 重新 计算 一 下 数组 长 度 、 提 高 循环 效率 。 


(2) 循环 访问 数组 的 元 素 

除了 通过 下 标 来 访问 数组 当中 的 元 素 外 ， 还 可 以 通过 for… in 循环 来 获取 数组 中 的 元 素 。 
本 质 上 for …in 循环 会 获取 到 数组 中 的 属性 ， 只 有 具有 Enumerable 〈 可 枚 举 ) 的 属性 才能 被 
for … in 遍历 ， 且 获取 的 属性 key 是 字符 类 型 的 。 数 组 ["a", "b", "ce"] 在 控制 台 输 出 的 结果 如 图 
4.1 所 示 。 


> arrs 
v(3) ["a", "b", "ce"] 
0: "a" 
Ls "bb” 
汪汪 二， 
length: 3 


* _proto_: Array(6) 
> arrs["9"] 
an 
arrs["1"] 
"bw 
arrs["2"] 
en 
arrs["3"] 


undefined 


Y 


Y 


v 


> arrs["length"] 
3 


图 4.1 控制 台 查 看 数组 的 内 部 结构 图 
通过 图 4.1 可 以 看 出 ， 数 组 中 存在 隐形 的 键 值 对 ， 形 如 {0:"a",1:"b",2:"c"}。 注 意 ，length 
颜色 比较 浅 一 点 ，for ...in 循环 的 时 候 并 不 遍历 它 。 代 码 4-7 给 出 了 用 for...in 循环 访问 数组 的 
示例 。 
【代码 4-7】 for..in 示例 代码 : ts007 .ts 


01 Tot arrele [ar "DON 
02 for (let i in arrs) { 


03 console.log(arrs[i]); /XRDDo 
04 } 


| for..in 循环 获取 的 属性 key 是 字符 类 型 的 , 而 且 会 获取 到 额外 的 属性 ,可 能 会 出 现 莫名 错 
[ 误 ， 因 此 使 用 该 方法 遍历 的 时 候 一 定 要 妥善 处 理 。 


89 


TypeScript 实战 


遍历 数组 或 对 象 一 种 更 安全 的 方式 是 用 for...of , 通过 for...of 循环 来 获取 数组 中 的 元 素 ， 
这 也 是 谷歌 等 公司 推荐 的 遍历 数组 和 对 象 的 方式 。 代 码 4-8 给 出 了 用 for..of 循环 访问 数组 的 
示例 。 


【代码 4-8】 for.…of 示例 代码 : ts008.ts 


01 ot Hrs Ia ee ls 


02 for (let i of arrs) { 
03 console.1og (i); //a b c 
04 } 


必 寺 for.in 循环 会 遍历 数组 中 的 属性 ， 而 for .in 不 会 遍历 数组 中 的 属性 。 | 


在 TypeScript 中 ， 有 一 个 delete 操作 符 ， 用 于 删除 对 象 的 某 个 属性 。 如 果 没 有 指向 这 个 属 
性 的 引用 , 那 它 最 终 会 被 释放 。 那么 用 delete 删除 数组 中 的 某 个 元 素 会 怎么 样 呢 ? 代码 4-9 给 
出 了 用 delete 删除 数组 元 素 的 示例 。 

【代码 4-9】 delete 删除 数组 元 素 示例 代码 : ts009.ts 

01 Tot arres = [ran "Dr onl] 

02 delete arrs[0]; 

执行 delete arrs[0] 语 句 后 ， 可 以 在 控制 台 将 arrs 打印 出 来 查看 具体 的 情况 ， 如 图 4.2 所 示 。 

> arrs 
v (3) [empty, "b", "c"] 
Ls br” 
全 2 
length: 3 
*_proto_: Array(9) 
图 4.2 delete 数组 元 素 后 的 内 部 结构 图 


从 图 4.2 可 以 看 出 ，arrs 的 第 一 个 元 素 变 成 了 empty， 而 数组 长 度 仍然 为 3。 


4.1.4 数组 对 象 


前 面 提 到 ， 声 明 数组 有 多 种 方式 ， 其 中 一 种 就 是 使 用 数组 泛 型 Array< 元 素 类 型 > 来 声明 和 
初始 化 数组 。 另 外 ， 还 可 以 用 数组 对 象 Array 的 构造 函数 来 声明 一 个 数组 的 同时 并 初始 化 它 。 

数组 对 象 Array 构造 函数 创建 数组 的 语法 为 : 

let 或 者 var 数组 名 = new Array (参数 ) ; 

其 中 ，new Array( 参 数 ) 主 要 有 3 种 用 法 : 


®@ new Array(); 


® new Array(Ssize); 
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® new Array(element0, element1l, ..., elementn); 


当 调用 构造 函数 Array() 创建 一 个 数组 时 ,返回 的 数组 为 空 , length 属性 为 0。 当 调用 构 
造 函 数 Array(size) 创 建 一 个 数组 时 , 该 构造 函数 将 返回 长 度 为 size、 元 素 为 undefined 的 数组 。 
当 调 用 Array(element0, elementl, .…, elementn) 创建 一 个 数组 时 , 该 构造 函数 将 用 参数 的 值 ( 喜 
号 分 隔 ) 初始 化 数组 ， 数 组 的 length 字段 也 会 被 设置 为 参数 的 个 数 。 


| Array 前 用 new 则 调用 的 是 构造 函数 ; 不 用 new 则 可 以 调用 Amray 对 象 中 的 属性 和 方法 ， 
t 二 者 差异 较 大 。 


下 面 用 具体 代码 来 说 明 Array 对 象 的 具体 使 用 方式 。 代码 4-10 分 别 给 出 了 new Array( 参 数 )3 
种 用 法 的 示例 。 


【代码 4-10】 Array 对 象 创建 数组 示例 代码 : ts010.ts 


01 let arrs = new Array(); /Vany[] 

02 console.log(arrs) 7 

03 let arrs2 = new Array(3); //any[] 

04 console.log (arrs2); 

05 let arrs3 = new Array(1,2,3); //number[] 
06 console.log (arrs3); 


代码 4-10 中 并 没有 明确 给 定数 组 的 元 素 类 型 ， 编 译 器 根据 规则 自动 进行 类 型 推断 ， new 
Array() 和 new Array(3) 创 建 的 数组 推断 为 any[] 。 而 new Array(1,2,3) 中 各 个 初始 化 的 元 素 皆 
为 number 类 型 的 ， 因 此 推断 为 number[] 。 

一 个 有 歧义 的 地 方 是 new Array(1)， 到 底 是 声明 一 个 长 度 为 1 的 any[] 数 组 还 是 声明 一 个 
只 有 一 个 元 素 1 的 number[] 类 型 的 数组 。 编 译 器 会 选择 前 者 。 

为 了 解决 这 种 歧义 , 可 以 用 数组 对 象 Array 的 泛 型 构造 函数 创建 确定 类 型 的 数组 , 语法 为 : 

let 或 者 var 数组 名 = new Array< 元 素 类 型 > (参数 ) ; 


其 中 的 参数 和 上 面 的 数组 对 象 Array 是 一 样 的 ， 不 再 歼 述 。 代 码 4-11 分 别 给 出 了 new 
Array< 元 素 类 型 >( 参 数 )3 种 用 法 的 示例 。 


【代码 4-11】 Array 泛 型 对 象 示例 代码 : ts011.ts 


01 let arrs = new Array<string>(); //string[] 


02 arrs.push("hello"); 

03 console.log (arrs); 

04 let arrs2 = new Array<number>(3); //number[] 

05 arre2[2] = 37 

06 console.log (arrs2); 

07 let arrs3 = new Array<number>(1, 2, 3); //number[] 
08 console.log (arrs3); 
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在 代码 4-11 中 ， 指 定 了 数组 元 素 的 具体 类 型 ，01 行 用 new Array<string>() 构 建 一 个 元 素 
类 型 为 string 的 空 数组 (已 经 初始 化 )，02 行 就 可 以 调用 数组 的 push 方法 往 数 组 中 添加 元 素 
"hello" 了 。04 行 用 new Array<number>(3) 创 建 了 一 个 长 度 为 3 的 number[] 数 组 ，05 行 直接 通 
过 下 标 arrs2[2] = 3 来 赋值 .07 行 用 new Array<number>(1, 2, 3) 创 建 了 一 个 长 度 为 3 的 number[] 
数组 ， 且 值 分 别 初始 化 为 1、2 和 3。 

将 代码 4-11 中 的 代码 进行 编译 并 运行 ， 控 制 台 打印 的 结果 如 图 4.3 所 示 。 


vArray(1) 
8: "hello" 
length: 1 
pb _proto_: Array(9) 
vArray(3) 
EF 
length: 3 
bp__proto_: Array(@) 


vArray(3) 
8: 1 


_:; Array(6) 


图 43 代码 4-11 控制 台 输出 结果 图 


数组 对 象 Array 有 一 个 prototype 属性 , 在 TypeScript 中 却 不 能 直接 向 Array 对 象 上 动态 添 
加 属性 和 方法 。 那么 TypeScript 中 如 何 打破 这 种 限制 , 让 不 可 能 变 成 可 能 呢 ? 答案 是 要 借助 接 
口 interface Array<T> 来 实现 。 代 码 4-12 给 出 了 如 何 通过 接口 来 扩展 Array 对 象 的 示例 。 


【代码 4-12】 Array 泛 型 对 象 扩展 示例 代码 : ts012.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
El 
ll 
12 


interface Array<T>{ 
Prop: string; 
log(msg: string) :void ; 
} 
Array.prototype.prop = "扩展 属性 "; 
Array .prototype.log = function (msg: string) { 
console.1log (msg); 
上 
let arrs = new Rrray() 
console.1log(arrs.1log (arrs.prop)); // 扩 展 属性 
let arrs2 = new Array(); 
console.1log (arrs2.1o0g (arrs2.prop)); // 扩 展 属性 


从 代码 4-12 中 可 以 看 出 ， 首 先 需 要 定义 一 个 interface Array<T> 的 泛 型 接口 ， 然 后 在 接口 
中 定义 一 个 属性 prop 和 一 个 方法 。 这 个 接口 中 的 定义 就 决定 了 Array.prototype 上 哪些 属性 和 
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方法 可 以 扩展 。05 行 在 Array.prototype 的 原型 链 上 对 扩展 属性 prop 进行 了 赋值 ，06~08 行 在 
Array.prototype 的 原型 链 上 对 扩展 方法 log 进行 了 实现 。 Array.prototype 可 以 让 Array 声明 的 每 
个 数组 实例 对 象 都 具有 扩展 的 属性 和 方法 。 


| 数组 类 型 是 接 对 象 来 引用 的 ， 不 是 按 值 来 引用 的 。 | 


前 面 提 到 ， 可 以 用 typeof 操作 符 来 判断 一 个 对 象 的 类 型 ， 在 某 些 情况 下 ， 返 回 的 类 型 是 
明确 的 ， 但 是 对 于 数组 而 言 会 返回 "object"。 怎 么 快速 判断 一 个 对 象 是 否 为 数组 类 型 呢 ? 其 实 
可 以 用 数组 对 象 Array 的 isArray 方法 来 判断 。 代 码 4-13 给 出 一 个 用 Array.isArray 方法 判断 对 
象 类 型 的 示例 。 


【代码 4-13】 Array.isArray 方法 示例 代码 : ts013.ts 


01 console.log(Array.isArray([1, 2, 3])); // true 
02 console.log (Array.isArray ({foo: 123})); // false 
03 console.log(Array.isArray('foobar')); // false 
04 console.log (Array.isArray (undefined)); // false 


坊 ArrayisArray 是 ES5 的 数组 方法 ， 部 分 低 版 本 的 浏览 器 存在 兼容 性 问题 。 | 


另外 ， 可 以 用 arrs instanceof Array 和 Object.prototype.toString.call(arrs) 这 两 种 方法 来 判断 
一 个 对 象 是 否 为 数组 ， 前 者 返回 true 或 false; 后 者 如 果 是 数组 对 象 ， 就 返回 [object Array]。 

由 于 数组 是 引用 类 型 对 象 , 因此 数组 在 使 用 的 时 候 一 定 要 格外 小 心 , 防止 在 其 他 地 方 被 修 
改 。 代 码 4-14 给 出 了 验证 数组 是 引用 类 型 的 示例 。 


【代码 4-14】 验证 数组 是 引用 类 型 的 示例 代码 : ts014.ts 


01 Let arc TI [2rl0,6r174r22731s 

02 console.log(arr); // [9, 10, 6, 4, 3, 2, 1] 

03 let arrl = arr.sort (function (a, b) { return a - by }); 
04 console.log(arr1l); // [9, 10, 6, 4 3, 2, 1] 

05 let arr2 = arr.sort (function (a, b) { return b - a; }); 


06 arr2[0] = 9; // 输 出 的 都 一 样 ， 指 向 同一 个 对 象 
07 console.log(arr2); //[9, 10, 6, 4, 3; 2, 1] 
上 述 代 码 4-14 中 的 02 行 并 未 打印 出 [2,10,6,1,4,22,3]， 而 是 输出 的 [9, 10, 6, 4, 3, 2, 1]。01 


行 创建 了 一 个 数组 arr，03 行 调用 了 数组 的 sort 方法 来 排序 ， 注 意 这 里 排序 的 规则 写法 ， 需 要 
传 入 一 个 函数 。 排 序 规则 函数 function (a bj)， 必 须 返 回 大 于 零 、 等 于 零 或 小 于 零 3 个 值 。 升序 
用 function (a, b) { return a -b; }) ， 降 序 用 function (a, b) { return b - a; }) 。05 行将 数组 arr 赋 
值 给 了 另 一 个 数组 arr2， 修 改 了 arr2 的 值 ，arr2 会 改变 ，arr 也 会 改变 ，arrl 也 同样 会 改变 。 
控制 台 输出 的 时 候 ，arr、arrl 和 arr2 值 都 是 一 样 的 。 
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数组 作为 程序 中 的 一 个 重要 数据 结构 , 在 实际 应 用 中 经 常 被 使 用 。 数组 本 身 有 很 多 内 置 的 
方法 可 以 方便 我 们 对 数组 进行 各 类 操作 。 表 4.1 给 出 了 数组 常用 的 方法 。 


表 4.1 数组 方法 

方法 | 说 明 

concat 连接 两 个 或 更 多 的 数组 ， 并 返回 结果 

every 检测 数值 的 每 个 元 素 是 否 都 符合 条 件 ， 都 符合 则 返回 tue， 只 要 有 一 个 不 满足 条 件 ， 则 
返回 false 

filter 过 滤 数 值 元 素 ， 并 返回 符合 条 件 所 有 元 素 的 数组 

forEach 数组 每 个 元 素 都 执行 一 次 回调 函数 ， 不 能 用 retum 

indexOf 搜索 数组 中 的 元 素 ， 并 返回 第 一 个 匹配 元 素 所 在 的 位 置 ， 索 引 从 0 开始 计算 ， 若 没有 对 
应 元 素 ， 则 返回 -1 


lastIndexOf 检测 数值 元 素 的 每 个 元 素 是 否 都 符合 条 件 ， 返 回 一 个 指定 的 字符 串 值 最 后 出 现 的 位 置 ， 
在 一 个 字符 串 中 的 指定 位 置 从 后 向 前 搜索 


join 把 数组 的 所 有 元 素 放 入 一 个 字符 串 ， 默 认 用 逗号 分 隔 
map 通过 指定 函数 处 理 数 组 的 每 个 元 素 ， 并 返回 处 理 后 的 数组 ， 即 可 以 用 return 
pop 删除 数组 的 最 后 一 个 元 素 并 返回 删除 的 元 素 

push 向 数组 的 末尾 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
reduce 将 数组 元 素 计算 为 一 个 值 ( 从 左 到 右 ) 

reduceRight 将 数组 元 素 计 算 为 一 个 值 (从 右 到 左 ) 

reverse 反 转 数组 的 元 素 顺序 

shift 删除 并 返回 数组 的 第 一 个 元 素 

slice 选取 数组 的 一 部 分 ， 并 返回 一 个 新 数组 

some, 检测 数组 元 素 中 是 否 有 元 素 符合 指定 条 件 

sort 对 数组 的 元 素 进 行 排序 

splice 从 数组 中 添加 或 删除 元 素 

toString 把 数组 转换 为 字符 串 ， 并 返回 结果 

unshift 向 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 


toLocalString 把 数组 转换 为 本 地 化 的 字符 串 ， 并 返回 结果 
表 4.1 只 是 罗列 了 数组 一 些 常用 方法 的 说 明 。 单 从 方法 说 明 上 虽然 可 以 大 致 了 解 其 基本 的 
用 途 , 但 是 具体 如 何在 实战 中 使 用 并 不 清楚 。 为 了 更 好 地 理解 这 些 方法 的 具体 用 法 。 下 面 针对 
上 面 的 每 个 方法 用 代码 进行 详细 说 明 。 
1. concat 方 法 
concat 方法 连接 两 个 或 更 多 的 数组 ， 并 返回 结果 。 代 码 4-15 给 出 了 使 用 concat 方法 连接 
两 个 数组 的 示例 。 
【代码 4-15】 concat 示例 代码 : ts015.ts 


01 Tet oiet= la 
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02 RaLDha2 ml 0 

03 let arrs = alpha.concat (alpha2); 

04 console.log (arrs); VN hel eh le ee th bd | 
05 console.log(""+tarrs); Vo le NP te 


导 | 在 TypeSeript 中 ，concat 连接 的 两 个 数组 必须 是 兼容 的 类 型 ， 否 则 会 提示 类 型 不 兼容 的 错 | 


t 误 。 


在 代码 4-15 中 ，01 行 和 02 行 分 别 创建 了 一 个 字符 类 型 的 数组 alpha 和 alpha2。03 行 用 
alpha.concat(alpha2) 进 行 了 两 个 数组 的 连接 ,并 返回 一 个 新 的 数组 arrsearrs 数组 的 值 为 ["a", "b"， 
"c""1", "2","3"]。 如 果 调 用 alpha2.concat(alpha) 则 值 应 该 为 ["1", "2", "3","a", "b", "ce"]。05 行 用 
""+arrs 属于 一 个 小 技巧 ， 可 以 将 数组 快速 转 成 字符 串 ， 并 用 逗号 分 隔 。05 行 输出 结果 为 
本 

concat 连接 的 两 个 数组 只 要 类 型 兼容 即 可 ， 不 一 定 要 完全 一 致 。 例 如 ， 一 个 any 类 型 的 数 
组 和 一 个 字符 类 型 的 数组 就 可 以 调用 concat 进行 连接 。 

2. every 方 法 

every 方法 检测 数值 中 的 每 个 元 素 是 否 都 符合 某 种 条 件 ， 都 符合 则 返回 true， 只 要 有 一 个 
不 满足 条 件 就 返回 false。 代 码 4-16 给 出 一 个 使 用 every 方法 判断 数组 的 每 个 元 素 是 否 都 大 于 
等 于 100 的 示例 。 

【代码 4-16】 every 示例 代码 : ts016.ts 


01 function isBigEnough (element) { 


02 return (element >= 100); 

03 } 

04 let passed = [22, 15, 18, 130, 184] .every (isBigEnough); 
05 console.1log(Passed) //false 


06 passed = [130, 184] .every (isBigEnough); 

07 console.log(passed ); //true 

在 代码 4-16 中 ， 首 先 定义 了 一 个 函数 isBigEnough (函数 后 续 章节 会 详细 介绍 ) 。 这 个 函 
数 有 一 个 形 参 element ， 在 函数 体 中 就 是 判断 传 入 的 参数 值 是 否 大 于 等 于 100， 并 返回 布尔 类 
型 的 值 。 04 行 在 数组 字面 量 [22, 15, 18, 130, 184] 上 直接 调用 every 方法 , 并 将 函数 isBigEnough 
作为 参数 传 入 。 由 于 数组 字面 量 [22, 15, 18, 130, 184] 中 的 22、15 和 18 都 小 于 100， 因 此 every 
方法 返回 false。06 行 在 数组 字面 量 [130, 184] 上 调用 every 方法 ， 由 于 数组 字面 量 [130, 184] 中 
的 130 和 184 都 大 于 100， 因 此 返回 true。 

3. filter 方法 

filter 方法 可 以 过 滤 数 组 元 素 ， 并 返回 符合 条 件 的 所 有 元 素 组 成 的 新 数组 。 这 个 方法 对 于 
要 从 数组 中 挑选 符合 某 种 条 件 的 元 素来 说 非常 适合 。 代 码 4-17 给 出 一 个 使 用 filter 方法 从 数组 
中 筛选 出 大 于 等 于 100 的 元 素 示例 。 
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【代码 4-17】 filter 示例 代码 : ts017 ts 


01 function isBigEnough(element) { 


02 return (element >= 100); 

03 ， 

04 let passed = [22，15，18，130，184] .filter(isBigEnough) 
05 console.log(passed); //[130, 184] 


在 代码 4-17 中 ，01~03 行 定 义 了 一 个 返回 布尔 值 的 函数 isBigEnough， 作 为 数组 的 筛选 条 
件 。04 行 在 数组 字面 量 [22, 15, 18, 130, 184] 调 用 filer 方法 ， 并 将 函数 isBigEnough 作为 参数 传 
入 ， 那 么 这 个 方法 将 返回 [130, 184]。 

4. forEach 方法 

forEach 方法 可 以 对 数组 进行 遍历 ， 在 遍历 的 时 候 可 以 用 一 个 函数 作为 参数 来 进行 一 些 处 
理 。 数 组 每 个 元 素 都 执行 一 次 回调 函数 ， 但 回调 函数 不 能 返回 值 。 代 码 4-18 给 出 一 个 使 用 
forEach 方法 对 数组 中 元 素 进 行 遍历 的 示例 。 
【代码 4-18】 forEach 示例 代码 : ts018.ts 


01 let num = [7, 8, 9]; 
02 num.forEach (function (value) { 


03 Value +=2; 
04 console.1log (value); WA EC 
05 Bn 


画 forEach 方法 中 的 回调 函数 即使 用 retum 返回 值 也 没有 效果 ，forEach 方法 本 身 会 返回 void 
【 类 型 。 


在 代码 4-18 中 ，01 行 用 let 声明 了 一 个 num 的 数组 ， 并 初始 化 值 为 [7, 8, 9]。02 行 在 数 
组 num 上 调用 forEach 方法 ， 并 在 里 面 传 入 了 一 个 匿名 函数 。 这 个 匿名 函数 的 参数 value 表示 
数组 的 元 素 。 虽 然 在 回调 函数 中 对 value 值 进行 加 2, 但 是 并 未 对 数组 num 的 值 产生 任何 改变 ， 
仍然 是 [7, 8, 9]。 可 见 数 组 在 函数 参数 中 是 按照 值 传递 的 。 

5. indexOf 方法 


indexOf 方法 可 以 搜索 数组 中 的 元 素 〈 从 左 到 右 ) ， 并 返回 第 一 个 匹配 元 素 所 在 的 索引 位 
置 ， 索 引 从 0 开始 计算 ， 若 没有 对 应 元 素 ， 则 返回 -1。 代 码 4-19 给 出 一 个 使 用 indexOf 方法 对 
数组 中 元 素 进行 搜索 的 示例 。 
【代码 4-19】 indexOf 示例 代码 : ts019.ts 


01 let arr =[130, 15, 18, 130, 184]7 
02 Var index = arr.indexOf (130); 


03 console.log (index); //0 
04 console.log(arr.indexOof(130,1)); //3 
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05 index = arr.indexOf (99); 
06 console.log( index ); V/ =1 


在 indexOf (要 搜索 的 值 ， 开 始 索引 号 ) 方法 中 ， 其 中 第 二 个 参数 是 可 选 的 ， 规 定 在 数组 
中 开始 检索 的 位 置 ， 合 法 取 值 是 0 到 (数组 length - 1) ， 若 省 略 ， 则 将 从 数组 的 索引 0 开始 
检索 ,在 代码 4-19 中 , 02 行 对 值 为 [130, 15, 18, 130, 184] 的 数组 arr 调用 indexOf 方 法 搜索 130， 
第 二 个 参数 省 略 ， 默 认 从 0 开始 检索 。 由 于 第 一 个 元 素 就 是 130( 索 引 为 0) ， 因 此 返回 0。 
04 行 调用 indexOf 方法 时 ， 传 入 两 个 实 参 ， 并 指定 了 要 从 1 开始 检索 ， 也 就 是 从 第 二 个 开始 
检索 。 由 于 第 一 个 元 素 130 不 在 搜索 范围 ， 因 此 检索 到 第 4 个 元 素 130， 索 引 为 3。 


6. lastIndexOf 方 法 


lastIndexOf 方法 可 以 搜索 数组 中 的 元 素 (从 右 到 左 ) ， 并 返回 第 一 个 匹配 元 素 所 在 的 索引 
位 置 。 若 没有 对 应 元 素 ， 则 返回 -1， 否 则 返回 元 素 所 对 应 的 数组 索引 。 代 码 4-20 给 出 一 个 使 
用 lastIndexOf 方法 对 数组 中 元 素 进行 搜索 的 示例 。 
【代码 4-20】 lastindexOf 示例 代码 : ts020.ts 


01 let arr =[130, 15, 18, 130, 184]; 
02 var index = arr.lastindexof (130); 


03 console.log(index) i 3 

04 console.log(arr.lastindexof (130,1)); //0 
05 index = arr.lastindexof (99); 

06 console.log (index); 1/ -1 


在 代码 4-20 中 ,02 行 对 值 为 [130, 15, 18, 130, 184] 的 数组 arr 调 用 lastIndexOf 方 法 搜索 130， 
它 的 搜索 是 从 右 到 左 的 ， 由 于 右边 第 二 个 元 素 是 130， 因 此 返回 这 个 130 对 应 的 下 标 索 引 3。 
04 行 调用 lastIndexOf 方法 时 ， 传 入 两 个 实 参 ， 并 指定 了 要 从 1 开始 检索 ， 也 就 是 从 第 二 个 开 
始 从 右 到 左 检 索 。 由 于 最 右边 的 130 不 在 搜索 范围 ， 因 此 检索 到 第 1 个 元 素 130， 索 引 为 0。 


7.join 方法 

join 方法 将 一 个 数组 的 所 有 元 素 根据 传 入 的 参数 连接 成 一 个 字符 串 ， 并 返回 这 个 字符 串 ， 
参数 若 不 提供 ， 则 默认 为 逗号 。 代 码 4-21 给 出 一 个 使 用 join 方法 对 数组 中 元 素 连 接 成 字符 串 
的 示例 。 


【代码 4-21】 join 示例 代码 : ts021.ts 


01 let arr = [ "jack","wang", "cumt" ]; 
02 let str = arr.join(); 


03 console.log( str ); //"jack,wang,cumt" 
04 tr = rE oD Tn 
05 console.log( str ); //"jack + wang + cumt" 


06 console. logt( [17273]. oim(e Yo A/A"18283" 


| join 方法 中 的 参数 既 可 以 是 字符 串 ， 也 可 以 是 数字 ， 还 可 以 是 null， 不 过 都 会 将 其 转化 成 
t 对 应 的 字符 串 形式 。 
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在 代码 4-21 中 ，01 行 创建 了 一 个 值 为 ["jack","wang","cumt"] 的 数组 ar，02 行 在 数组 arr 上 调 
用 了 join 方法 , 由 于 没有 传递 参数 , 默认 用 各 号 进行 连接 。 因此 03 行 输出 的 值 为 "jack,wang,cumt"。 
04 行 用 一 个 参数 "+ "调用 了 一 个 join 方法 ， 则 05 行 输出 的 值 为 "jack + wang + cumt"。 注 意 ， 
06 行 传 入 了 一 个 8 作为 参数 ， 则 [1,2,3].join(8) 返 回 "18283"。 


8. map 方 法 


map 方法 可 以 遍历 数组 中 的 每 个 元 素 ， 并 通过 传 入 回调 函数 来 对 每 个 数组 元 素 进行 处 理 ， 


并 返回 处 理 后 的 数组 。 和 forEach 的 区 别 是 map 可 以 在 函数 中 用 return。 一 般 情 况 下 ，map 方 
法 返回 一 个 数组 。 代码 4-22 给 出 一 个 使 用 map 方法 对 数组 中 元 素 进行 遍历 处 理 并 返回 一 个 新 
数组 的 示例 。 


【代码 4-22】 map 示例 代码 : ts022.ts 


01 
02 
03 
04 
05 
06 


let numbers = [130, 15, 18, 130, 184]; 
function fnRdd (element) { 

return element + 2; 
} 
let roots = numbers .map (fnAdd); 
console.log(roots); //[132,17,20,132,186] 


map 方法 如 果 不 用 return 返回 结果 ,就 会 返回 一 个 长 度 和 原 数组 一 样 但 元 素 都 为 undefined 
的 数组 。 


map 和 forEach 方法 不 同 , 在 forEach 中 return 语句 是 没有 任何 效果 的 ; 而 map 则 可 以 改 
变 当 前 循环 的 值 ， 返 回 一 个 新 的 被 改变 过 值 的 数组 。map 中 的 回调 函数 虽然 不 强制 必须 带 
return， 但 是 本 身 这 个 方法 设计 的 目的 就 是 要 修改 某 一 个 数组 的 值 ， 也 就 是 要 有 return 语句 。 
从 代码 4-22 中 可 以 看 出 ，02~04 行 定 义 了 一 个 函数 fnAdd， 它 对 传 入 的 参数 加 2 后 返回 。 
05 行 调用 数组 numbers 的 map 方法 ， 并 将 函数 fnAdd 作为 参数 传 入 ， 这 样 就 可 以 在 遍历 数组 
元 素 的 时 候 将 每 个 元 素 加 2 后 返回 ,因此 06 行 输出 的 结果 [132,17,20,132,186] 是 由 [130+ 2, 15 
+2, 18+2, 130+2, 184 +2] 而 来 。 


9. pop 方法 


pop 方法 删除 数组 的 最 后 一 个 元 素 并 返回 删除 的 元 素 。pop 方法 删除 最 后 一 个 元 素 时 会 把 
数组 长 度 减 1。 代 码 4-23 给 出 一 个 使 用 pop 方法 对 数组 中 元 素 进行 操作 的 示例 。 


【代码 4-23】 pop 方法 示例 代码 : ts023.ts 
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01 
02 
03 
04 


let numbers = [130, 15, 18, 130, 184]; 

let element = numbers.pop(); 

console.log (element); //184 

console.1log (numbers); A/ [130 157r 18r 130]7 
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想必 | 在 空 数 组 中 调用 pop 方法 返回 undefined。 | 


在 代码 4-23 中 ，01 行 创建 了 一 个 长 度 为 5 的 数组 numbers，02 行 在 数组 numbers 上 调用 
pop 方法 删除 最 后 一 个 元 素 并 返回 该 元 素 赋值 给 变量 element， 这 样 element 值 为 184。 此 时 数 
组 的 长 度 也 会 减 1， 也 就 是 4，numbers 的 值 修改 为 [130, 15, 18, 130]。 


10. push 方法 
push 方法 向 数组 的 末尾 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 数组 ， 数 组 长 度 也 会 相应 变化 。 
如 果 在 末尾 追加 的 元 素 是 多 个 ， 那 么 用 逗号 分 隔 。 代 码 4-24 给 出 一 个 使 用 push 方法 对 数组 中 
元 素 进行 操作 的 示例 。 
【代码 4-24】 push 方法 示例 代码 : ts024.ts 


01 let numbers = [130, 15, 18, 130, 184]; 

02 let len = numbers.push (2,3); 

03 console.log(len); XA7 

04 console.1og (numbers) TSO Lor or L330 Moar27r3l] 


| 数组 pop 方法 的 参数 如 果 是 多 个 值 , 就 不 允许 直接 传递 数组 , 但 可 以 将 展开 操作 符 和 数组 
| 一 块 作为 参数 传 入 ， 如 arrs.push(.…[1,2]) 。 


在 代码 4-24 中 ，01 行 用 数组 字面 量 创建 了 一 个 数组 numbers，02 行 在 数组 numbers 上 调 
用 push 方法 在 数组 末尾 添加 2 个 元 素 ， 分 别 是 2 和 3。 此 时 ， 数 组 numbers 是 长 度 为 7 的 一 
个 数组 ， 值 为 [130, 15, 18, 130, 184, 2, 3 ] 。 

11. reduce 方法 


reduce 方法 接受 一 个 回调 函数 作为 累加 器 ， 数 组 中 的 每 个 值 (从 左 到 右 ) 开始 缩减 ， 最 终 
计算 为 一 个 值 。 因 此 reduce 方法 可 以 对 数值 类 型 的 数值 求 和 或 者 求 积 。 这 个 回调 函数 必须 有 
两 个 参数 ， 其 中 第 一 个 是 回调 函数 返回 的 值 或 初始 值 ， 第 二 个 参数 为 当前 元 素 值 。 代 码 4-25 
给 出 一 个 使 用 reduce 方法 对 数组 中 元 素 进行 累加 的 示例 。 


【代码 4-25】 reduce 方法 示例 代码 : ts025.ts 


01 let numbers = [1, 2, 3]; 
02 let sum =function(a, b){ 


03 return a + b7 

04 } 

05 let total = numbers.reduce (Sum) 7 

06 console.log("total is : " + total ); //6 
07 console.log("total is : " + numbers.reduce (sum,10)); //16 


卫 直 Teduce 方法 对 于 空 数组 是 不 会 执行 回调 函数 的 。 | 
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在 代码 4-25 中 ，01 行 用 数值 字面 量 [1, 2, 3] 创 建 了 一 个 数值 numbers; 02~04 行 定义 了 一 
个 函数 ， 这 个 函数 必须 有 两 个 参数 ， 其 中 03 行 返回 a 和 b 的 和 。 第 一 次 计算 时 ，a 是 1, b 是 
2; 第 二 次 计算 时 ，a 是 1+2=3, b 是 3， 则 atb 返回 6。 

07 行 中 的 numbers.reduce(sum,10) 有 两 个 参数 , 除了 传 入 一 个 函数 , 还 传 入 了 一 个 初始 值 。 
reduce 方法 传 入 初始 值 后 ， 第 一 次 计算 时 ，a 是 10, b 是 1; 第 二 次 计算 时 , a 是 10+1=11, b 
是 2; 第 三 次 计算 时 ，a 是 11+2=13, b 是 3， 所 以 atb 返回 16。 

reduce 可 以 求 数 组 中 的 最 大 值 或 最 小 值 ， 如 代码 4-26 所 示 。 


【代码 4-26】 reduce 求 数组 中 最 大 值 示例 代码 : ts026 .ts 


01 let numbers = [1, 2, 3]; 
02 let max = function (a, b) { 


03 returna>b?a:b; 

04 } 

05 let ret = numbers .reduce (max); 

06 console.log("max : " + ret); 3 

在 代码 4-26 中 , 03 行 用 return a>b?a:b 则 只 返回 两 个 值 中 的 最 大 值 ， 因此 多 次 计算 后 
整个 数组 的 最 大 值 也 将 产生 并 返回 。 


12. reduceRight 方 法 


reduceRight 方法 与 reduce() 的 不 同 之 处 是 在 操作 数组 中 数据 的 方向 不 同 : reduce() 方 法 是 
从 左 向 右 进 行 ， 而 reduceRight 是 从 右 向 左 。 代 码 4-27 给 出 一 个 使 用 reduceRight 方法 对 数组 
中 元 素 进行 累加 的 示例 。 


【代码 4-27】 reduceRight 方 法 示例 代码 : ts027.ts 


01 LOG rere Dim 2 

02 let sum =function(a, b){ 

03 returna+b; 

04 } 

05 let total = arrs.reduceRight (sum); 
06 console.log( total ); //"321" 


在 代码 4-27 中 ，01 行 用 数组 字面 量 创建 了 一 个 字符 类 型 的 数组 arrs。02~04 行 定义 了 一 
个 函数 ， 由 于 数组 类 型 为 字符 串 ， 因 此 03 行 数组 元 素 进 行 拼接 。05 行 调用 reduceRight(sum)， 
计算 过 程 为 : 第 一 次 计算 时 ，a 是 "3"，b 是 "2"; 第 二 次 计算 时 ，a 是 "3"+"2"="32"，b 是 "1"; 
最 后 atb 返回 "321"。 

13. reverse 方法 


reverse 方法 反 转 数组 的 元 素 顺序 。 代码 4-28 给 出 一 个 使 用 reverse 方法 对 数组 中 元 素 进行 
反 转 的 示例 。 


100 


第 4 章 数组 、 元 组 


【代码 4-28】 reverse 方法 示例 代码 : ts028.ts 
01 Tot arcsse ll on my 
02 let ret = arrs.reverse(); 
03 console.log (ret); pd A ee de he te | 


reverse 方法 对 数组 进行 反 转 ， 并 返回 反 转 后 的 数组 ， 但 这 个 数组 和 原先 的 数组 都 指向 同 | 


\ 一 个 对 象 ， 因 此 修改 一 个 数组 的 值 会 影响 另外 一 个 。 


从 代码 4-28 中 可 以 看 出 ，reverse 方法 将 数组 
ret[0] = 


14. shift 方法 


"6" 修改 数组 ret 的 值 ， 那 么 数组 arrs 的 值 也 将 会 改变 ， 值 为 ["6", " 


["1", "2", "3"] 反 转 为 ["3", "2" "1"]。 如 果 用 


,9。 


shift 方法 删除 并 返回 数组 的 第 一 个 元 素 。shift 和 pop 都 是 删除 并 返回 数组 的 元 素 , 但 是 
前 者 是 第 一 个 元 素 ， 而 后 者 是 末尾 第 一 个 。 代 码 4-29 给 出 一 个 使 用 shift 方法 对 数组 进行 操作 


的 示例 。 

【代码 4-29】 shift 方法 示例 代码 : ts029.ts 
01 let numbers = [1, 2, 3]; 
02 let ret = numbers.shift(); 
03 console.log (ret); We 
04 console.1og (numbers); Pd | 
15. slice 方法 


slice 方法 选取 数组 的 一 部 分 ， 并 返回 一 个 新 数组 。slice 方法 有 两 个 参数 。 第 一 个 参数 是 
必需 的 ， 表 示 从 哪里 开始 选取 : 如 果 是 正 数 〈0 表示 数组 第 1 个 元 素 ，1 表示 第 2 个 元 素 ， 以 
此 类 推 ) ， 就 从 前 往 后 数 ， 如 果 是 负数 〈-!1 表示 倒数 第 1 个 元 素 ，-2 表示 倒数 第 2 个 元 素 ， 
以 此 类 推 ) ， 则 从 后 往 前 数 。 第 二 个 参数 是 可 选 的 ， 表 示 选 取 到 哪里 : 如 果 是 正 数 ， 就 从 前 往 
后 数 〈 包 括 本 身 ) ， 如 果 是 负数 ， 就 从 后 往 前 数 〈 不 包括 本 身 ) 。 这 个 参数 不 提供 的 话 默认 选 
取 到 最 大 值 。 代 码 4-30 给 出 一 个 使 用 slice 方法 对 数组 进行 选取 的 示例 。 


【代码 4-30】 slice 方法 示例 代码 : ts030.ts 


01 ES [1 "2" "31 

02 console.log(arrs.slice(0,3)); 
03 console.log(arrs.slice(1，2))7 
04 console.log(arrs.slice(1,5)); 
05 console.log(arrs.slice(1)); 

06 console.log(arrs.slice(5)); 

07 console.log(arrs.slice(-1)); 

08 console.log(arrs.slice(-2)); 

09 console.log(arrs.slice(-5)); 

10 console.log(arrs.slice(-1, 0)); 


Wl 
2 
// 1"2", "3")] 
1/ 1"2", "3")] 
i 

Ws 

// I"2", "3"] 
// "1", "2", 
a 


"2", 


"3"] 


"3"] 
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了 村 console.log(arrs.slice(-2, 3)); AT wy 
12 console.log(arrs.slice(-1, 3)); Plt wl | 
ey console.log(arrs.slice(-2,-1)); | 


在 slice 参数 都 是 正 数 的 情况 下 ，02 行 arrs.slice(0,3) 表 示 选 取 数 组 arrs 下 标 为 0 (第 1 个 
元 素 ) ， 到 第 3 个 元 素 ， 即 ["1", "2", "3"]; 03 行 arrs.slice(1, 2) 选 取 数组 arrs 下 标 为 1 (第 2 个 
元 素 ) ， 到 第 2 个 元 素 ， 即 ["2"]; 04 行 arrs.slice(1, 5) 选 取 数组 arrs 下 标 为 1 (第 2 个 元 素 ) ， 
到 第 5 个 元 素 (超出 数组 范围 ， 选 取 最 大 值 )， 即 ["2","3"]; 06 行 arrs.slice(5) 选 取 数 组 arrs 下 
标 为 5 的 元 素 ， 由 于 越界 ， 因 此 返回 空 数组 。 

当 只 有 一 个 负数 (负数 表示 选取 倒数 第 几 个 元 素 到 数组 末尾 ) 的 参数 时 ， 如 07 行 的 
arrs.slice(-1) 表 示 选 取 倒 数 第 1 个 元 素 到 数组 的 最 后 一 个 元 素 ， 即 ["3"]; 08 行 的 arrs.slice(-2) 表 
示 选 取 倒 数 第 2 个 元 素 到 数组 的 最 后 一 个 元 素 ， 即 ["2","3"]; 09 行 的 arrs.slice(-5) 表 示 选取 倒 
数 第 5 个 元 素 〈 越 界 则 从 0 开始 ) 到 数组 的 最 后 一 个 元 素 ， 即 ["1", "2", "3"]。 

当 第 一 个 参数 是 负数 〈 表 示 选 取 倒数 第 几 个 元 素 ) 、 第 二 个 参数 是 正 数 (表示 到 第 几 个 元 
素 结束 ) 时 ， 如 10 行 的 arrs.slice(-1, 0) 表 示 从 倒数 第 一 个 元 素 开始 (注意 方向 是 向 右 ， 不 是 
向 左 ) 到 第 一 个 元 素 ， 由 于 倒数 第 一 个 元 素 向 右 不 包含 第 一 个 元 素 ， 因 此 为 空 数组 ，11 行 的 
arrs.slice(-2, 3) 表 示 从 倒数 第 2 个 开始 (方向 向 右 〉 到 第 3 个 元 素 结束 ， 即 ["2", "3"]。 

当 两 个 参数 都 是 负数 时 ，arrs.slice(-2,-1) 表 示 从 倒数 第 2 个 开始 到 倒数 第 1 个 结束 (负数 
不 包括 本 身 ) ， 即 为 ["2"]。 

16. some 方法 

some 方法 用 于 检测 数组 元 素 中 是 否 有 元 素 符合 指定 条 件 ， 如 果 有 就 返回 true， 和 否则 返回 
false。some 方法 接受 一 个 回调 函数 来 定义 规则 ， 回 调 函 数 返回 值 是 布尔 类 型 的 。 代 码 4-31 给 
出 一 个 使 用 some 方法 对 数组 进行 检测 的 示例 。 

【代码 4-31】 some 方法 示例 代码 : ts031.ts 


01 function isBigEnough (element) { 


02 return (element >= 10); 

03 } 

04 let retval = [1, 2, 3] .some (isBigEnough); 
05 console.log( retval ); // false 

06 retval = [12，5，8] .some (isBigEnough) 7 

07 console.log(retval ); // true 


从 代码 4-31 可 以 看 出 ,数组 只 要 有 一 个 大 于 10 就 返回 true, 如 果 全 部 小 于 10 就 返回 false。 

17. sort 方 法 

sort 方法 是 对 数组 元 素 进 行 排序 的 ， 可 以 降序 或 者 升序 。 它 有 一 个 可 选 参 数 ， 用 来 确定 元 
素 排序 规则 的 函数 。 如 果 这 个 参数 被 省 略 ， 那 么 数组 中 的 元 素 将 按照 ASCII 字符 顺序 进行 排 
序 ,但 是 默认 的 排序 往往 会 产生 让 人 奇怪 的 结果 , 如 [2,10,6,1,4,22,3].sort() 的 结果 是 [1, 10, 2, 22， 
3, 4, 6]。 这 是 由 于 默认 会 调用 toString 方法 后 再 排序 ， 虽 然 数 值 10 比 2 大 ， 但 是 在 进行 字符 
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串 比 较 时 “10” 则 排 在 “2” 前 面 。 

一 般 情况 下 都 需要 定义 一 个 返回 大 于 0、 等 于 0 和 小 于 0 三 种 结果 的 函数 来 确定 排序 规则 。 
函数 function(a,b){ return a-b;} 定 义 了 升序 规则 ， 而 function(a,b){ return b-a;} 定 义 了 降序 规 
则 。 代 码 4-32 给 出 一 个 使 用 sort 方法 对 数组 进行 排序 的 示例 。 

【代码 4-32】 sort 方 法 示例 代码 : ts032.ts 


01 let arr = [2, 10, 6, 1, 4, 22, 3] 


02 console.log (arr); A ll 2r 3 dy 6r Ll0r 22] 
03 let arrl = arr.sort(function (a, b) { 

04 // 升 序 

05 returna-b; 

06 1D); 

07 console.log(arr1); 和 | 


坊 sort 会 改变 原 数 组 的 值 。 | 


18. splice 方法 


splice 方法 可 以 向 数组 中 添加 值 ， 也 可 以 从 数组 中 删除 值 ， 然 后 返回 被 删除 的 项 目 。splice 
语法 为 arr.splice(index, howmany, item1,.…,itemN) 。 其 中 几 个 参数 说 明 如 下 : 


@ index 是 必需 参数 ， 是 整数 ， 规 定 添加 /删除 项 目的 位 置 。 使 用 负数 可 从 数组 结尾 处 确 
定位 置 ， 比 如 -1 表示 倒数 第 一 个 元 素 的 位 置 、-2 表示 倒数 第 二 个 元 素 的 位 置 。 
@ howmany 也 是 必需 参数 ， 表 示 要 删除 的 项 目 数 量 。 如 果 设置 为 0， 就 不 会 删除 项 目 。 
@ iteml, ,itemN 是 可 选 参数 ， 表 示 向 数组 添加 的 新 元 素 。 
代码 4-33 给 出 一 个 使 用 splice 方法 对 数组 进行 操作 的 示例 。 
【代码 4-33】 splice 方法 示例 代码 : ts033.ts 


01 let arr = ["orange", "banana", "apple"]; 


02 let removed = arr.splice(2, 1, "tea"); 

03 console.log (arr); //["orange", "banana", "tea"] 
04 console.log (removed); //"apple" 

05 let arr2 = [1, 2, 3]; 

06 let removed2 =arr2.splice(-2,2,6,8); 

07 console.log(arr2); //[1,6,8] 

08 console.1log (removed2); 3 


攻 元 splice 方法 与 slice 方法 的 作用 是 不 同 的 ，splice 方法 会 直接 对 数组 进行 修改 。 | 
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19. toString 方法 


toString 方法 把 数组 转换 为 字符 串 ， 并 返回 结果 。 代 码 4-34 给 出 使 用 toString 方法 将 数组 
转 成 字符 串 的 示例 。 


【代码 4-34】 toString 方法 示例 代码 : ts034.ts 


01 
02 
03 


let arr = ["orange", "banana", "apple"]; 
let str = arr.toString(); 
console.log(str); // "orange,banana,apple" 


20. unshift 方 法 


unshif 方法 向 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 数组 。 代 码 4-35 给 出 使 用 unshift 
方法 将 数组 添加 元 素 的 示例 。 


【代码 4-35】 unshift 方法 示例 代码 : ts035.ts 


let numbers = ["1", "2", "3"]7 

let ret = numbers.unshift ("4"); 

console.log (ret); /1/4 

console.1og (numbers); V0 et eol hn de hel| 


unshift 方法 添加 的 元 素 必须 和 原 数 组 类 型 兼容 。 其 他 数组 方法 涉及 添加 元 素 的 情况 ,也 必 
须 和 原 数 组 类 型 兼容 。 


4.1.6 ”数组 解构 


解构 〈destructuring) 是 对 结构 进行 分 解 。 在 ES6 规范 中 允许 按照 一 定 的 模式 从 数组 和 对 
象 中 提取 值 ， 并 将 提取 的 值 赋 给 变量 ,这 个 操作 称 为 解构 。 以 前 假设 要 声明 3 个 变量 ,并 为 变 
量 赋值 ， 往 往 要 写 多 条 语句 如果 通过 数组 的 解构 来 为 多 个 变量 赋值 ， 一 条 语句 即 可 ,简洁 且 
高 效 。 数 组 解构 必须 将 变量 放 到 [ ] 内 。 代 码 4-36 给 出 传统 变量 赋值 和 使 用 数组 解构 为 变量 赋 
值 的 对 比 示例 。 


【代码 4-36】 传统 变量 赋值 和 使 用 数组 解构 为 变量 赋值 示例 代码 : ts036 .ts 


01 
02 
03 
04 


let a= 1; 
let b = 2; 
let eo = 3 


Let tay by ©) = [ly 273] 7 


在 代码 4-36 中 ，01~03 行 利用 传统 的 变量 声明 和 初始 化 方法 为 3 个 变量 (a, b,c) 赋值 。 
04 行 利用 数组 解构 可 以 用 一 条 语句 完成 01~03 语句 的 功能 。 很 明显 ， 数 组 解构 可 以 让 代码 更 
加 简洁 和 清晰 。 本 质 上 ， 这 种 写法 属于 “模式 匹配 ”， 只 要 等 号 两 边 的 模式 相同 ， 左 边 的 变量 
就 会 被 赋予 对 应 的 值 。 下 面 是 一 些 使 用 谋 套 数组 进行 解构 的 例子 。 代 码 4-37 给 出 嵌 套 数组 解 
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构 的 示例 。 
【代码 4-37】 赃 套 数组 解构 示例 代码 : ts037 ts 


01 let [ar [IIb]，cl] = 01 0L2]7 3]]27 


02 console.1log(a) 7 VA el 
03 console.1log(b); WE 
04 console.log(c); Vf 
05 Tet lxr yl = Dl //x=1, y= undefined 


在 代码 4-37 中 ， 左 边 和 右边 的 模式 匹配 ， 那 么 对 应 位 置 的 值 则 赋予 对 应 位 置 的 变量 。 如 
果 解 构 不 成 功 ,没有 匹配 的 变量 值 就 等 于 undefined。 如 05 行 所 示 ， 变 量 x 匹配 第 一 个 数组 元 
素 1; 变量 y 则 匹配 不 到 ， 为 undefined。 


可 数组 解构 可 以 指定 默认 值 ， 如 “let [a,b=2]=[1]; ”， 则 a=1、b=2。 | 


数组 解构 是 有 使 用 范围 的 , 不 是 任何 对 象 都 可 以 被 解构 。 如 果 解 构 语句 中 等 号 的 右边 不 是 
数组 ， 或 者 不 是 可 遍历 的 结构 ， 那 么 解构 将 会 报错 。 例 如 ， 我 们 不 可 以 对 一 个 数值 或 者 布尔 
进行 数组 解构 ， 也 不 能 对 一 个 空 对 象 字面 量 进行 数组 解构 。 代 码 4-38 给 出 一 些 不 能 被 数组 解 
构 的 示例 。 


【代码 4-38】 不 能 被 数组 解构 示例 代码 : ts038.ts 


om vecatall = // 错 误 
02 let [b] = true; // 错 误 
oet [el Oy // 错 误 


变量 的 解构 赋值 在 实际 开发 中 有 很 多 用 途 ， 例 如 可 以 交换 变量 的 值 。 代 码 4-39 给 出 利用 
数组 解构 完成 交换 变量 值 的 示例 。 
【代码 4-39】 数组 解构 完成 交换 变量 值 示例 代码 : ts039.ts 

01 Lot z= 1 

02 let y= 2; 

03 Ey = yl 

04 console.1og (x); 272 

05 console.1log(y); /1/1 


从 代码 4-39 可 以 看 出 ， 数 组 解构 的 等 号 右边 也 可 以 是 一 组 变量 ， 而 不 一 定 是 常量 。 数 组 
解构 的 另外 一 个 常见 用 途 是 让 一 个 函数 返回 多 个 值 .函数 只 能 返回 一 个 值 ,如 果 要 返回 多 个 值 ， 
只 能 将 它们 放 在 数组 或 对 象 里 返回 。 有 了 解构 赋值 ， 取 出 这 些 值 就 非常 方便 了 。 函数 将 在 后 续 
章节 进行 讲解 ， 这 里 只 要 了 解 有 这 个 用 法 即 可 。 代 码 4-40 给 出 了 利用 数组 解构 从 函数 返回 值 
并 获取 多 个 值 的 示例 。 
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【代码 4-40】 数组 解构 从 函数 返回 多 个 值 示例 代码 : ts040.ts 


01 function func() { 


02 return fl 2, 3]; 

03 ' 

04 let [a, b, c] = func(); 
05 console.1o0g(a); AT 
06 console.1log(b); //2 
07 console.log(c); //3 


4.1.7 ”数组 的 遍历 


数组 遍历 的 一 些 方法 在 前 面 的 访问 数组 元 素 小 节 部 分 也 简单 地 介绍 了 一 下 。 这 里 我 们 再 回 
顾 和 归纳 扩展 一 下 。 数 组 可 以 存储 多 个 值 ， 在 对 数组 进行 操作 的 时 候 , 难免 要 对 它 进行 遍历 操 
作 ， 从 而 可 以 对 每 个 元 素 进行 特定 处 理 。 数 组 遍历 的 方法 比较 多 , 下面 归 纳 一 下 经 常会 用 到 的 
几 个 遍历 方法 。 

1. 利用 for 循环 遍历 


数组 的 length 属性 可 以 获取 数组 的 长 度 。 利 用 length 属性 可 以 通过 for 循环 下 标 来 遍历 数 
组 。 代 码 4-41 给 出 在 for 循环 中 通过 下 标 遍历 数组 的 示例 。 
【代码 4-41】 for 循环 遍历 数组 示例 代码 : ts041.ts 

01 Tet arrs se [a "Db "oly 

02 let len = arrs.length; // 提高 循环 效率 

03 for (let i = 0; i < len;i++) { 


04 console.log(arrs[i]); Mabe 
05 } 


医改 数组 的 length 有 时 候 可 以 被 修改 ， 可 能 不 真实 反映 实际 的 长 度 。 | 


2. 利用 for ... in 遍历 


for …in 循环 用 来 遍历 获取 数组 中 的 元 素 ， 本 质 上 for… in 循环 会 遍历 获取 到 数组 中 的 属 
性 。 只 有 具有 Enumerable 〈 可 枚 举 ) 的 属性 才能 被 for…in 遍历 ， 且 获取 的 属性 key 是 字符 
类 型 的 。 代 码 4-42 给 出 在 for…in 循环 中 通过 获取 属性 遍历 数组 的 示例 。 


【代码 4-42】 for … in 遍历 数组 示例 代码 : ts042.ts 


01 Let a = [ly Zr 3 

02 for (let i in a) { 

03 console.log(a[il]); A 
04 } 


106 


第 4 章 数组 、 元 组 


for.in 可 以 获取 数组 的 原型 扩展 属性 ,这 可 能 会 出 现 错误 ,因此 使 用 该 方法 裔 历 的 时 候 一 ] 
[E> 定 要 注意 。 


3. 利用 for ..…. of 遍历 


遍历 数组 一 种 更 安全 的 方式 是 用 for...of。 通 过 for..of 循环 可 以 直接 获取 数组 中 的 元 素 值 ， 
这 也 是 谷歌 等 公司 推荐 的 遍历 数组 和 对 象 的 方式 。 代 码 4-43 给 出 用 for..….of 循环 遍历 数组 的 示 
例 。 


【代码 4-43】 for.…of 遍历 数组 示例 代码 : ts043.ts 


01 Lot Aarecg. w=w las sD ml 
02 for (let 1 .of arrsy { 

03 console.1log (i); /l/labc 
04 } 


卫 下 | 建议 用 for..in 来 遍历 数组 。 | 


除了 利用 循环 来 遍历 数组 外 , 数组 本 身 的 有 些 方法 也 可 以 实现 对 数组 的 遍历 。 这 些 方法 基 
本 上 都 是 传 入 一 个 回调 函数 来 对 数组 元 素 进 行 逻辑 处 理 。 这 些 方法 在 数组 方法 小 节 也 介绍 过 。 
这 里 再 次 回顾 一 下 。 
4. forEach 遍历 
forEach 是 常用 的 一 个 数组 遍历 方法 ， 传 入 的 回调 函数 不 允许 返回 值 ， 即 使 在 回调 函数 体 
中 用 return 语句 也 无 效 。 代 码 4-44 给 出 用 数组 forEach 方法 循环 遍历 数组 的 示例 。 
【代码 4-44】 forEach 遍历 数组 示例 代码 : ts044.ts 


01 let names = ["hello", "world", "!"]; 

02 names.forEach (function (value, index) { 

03 console.log (value); //"hello™" "world" "!" 
04 console.1log (index); Or 

05 x 


芒 forEach 中 的 回调 函数 不 能 使 用 break 语句 中 断 循环 ,也 不 能 使 用 retum 语句 返回 外 层 函数 。 | 


5. map 遍历 
map 方法 可 以 在 传 入 的 回调 函数 中 返回 一 个 新 值 , 这样 就 会 对 原 有 数组 中 的 每 个 元 素 进行 
统一 处 理 ， 并 返回 新 的 一 个 数组 。 代 码 4-45 给 出 用 数组 map 方法 循环 遍历 数组 的 示例 。 
【代码 4-45】 map 遍历 数组 示例 代码 : ts045.ts 


01 let names = ["hello", "world", "™!"]; 
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02 let newNames = names .map (function (value, index) { 


03 console.log (value); //"hello™ "world" "!" 

04 console.1log (index); WA 

05 return value.toUpperCase(); 

06 Pn 

07 console.1log (newNames); //[I"HELLO™", "WORLD™, ™!™] 
08 console.log (names); /l/l"hello", "world", ™!"] 


| map 是 表示 映射 的 ， 也 就 是 一 一 对 应 ， 遍 历 完 成 之 后 会 返回 一 个 新 的 数组 ， 但 是 不 会 修 
[”” 改 原来 的 数组 。 


此 外 ， 数 组 中 的 every、filter 和 some 等 方法 通过 回调 函数 都 可 以 对 数组 进行 遍历 ， 这 里 
就 不 再 袭 述 了 。 


4.1.8 多 维 数组 


前 面 说 的 数组 都 是 一 维 数组 , 也 是 最 简单 的 数组 。 数 组 按 维 数 可 以 分 为 一 维 数组 和 多 维 数 
组 ,现实 中 常用 的 多 维 数组 为 二 维 数组 和 三 维 数组 。 多 维 数组 (高 维 数组 ) 的 概念 特别 是 在 数 
值 计算 和 图 形 应 用 方面 非常 有 用 。 

对 于 多 维 数 组 ， 我 们 以 常用 的 二 维 数组 为 例 进行 介绍 。 学 过 JavaScript 的 人 都 知道 ， 在 
JavaScript 中 其 实 没 有 二 维 数组 的 类 型 , 我 们 实现 二 维 数组 的 方法 是 向 数组 中 插入 数组 。 
TypeScript 提供 了 不 一 样 的 方式 来 表示 二 维 数组 ， 第 一 个 维度 称 为 行 ， 第 二 个 维度 称 为 列 。 

TypeScript 声明 二 维 数组 的 方式 有 两 种 : 


第 一 种 用 [][] 来 声明 ， 语 法 如 下 : 

let twoArrs : string[][] ; 

第 二 种 用 Array 来 声明 ， 语 法 如 下 : 

let twoArrs : Array<Array<string>> ; 

由 于 只 是 声明 了 二 维 数组 twoArrs， 但 并 没有 初始 化 ， 因 此 运行 的 时 候 变 量 的 初始 值 是 
undefined。 因 此 不 能 直接 调用 其 push 等 方法 。 要 避免 这 个 错误 ， 需 要 在 声明 的 时 候 一 并 初始 
化 变量 值 。 代 码 4-46 给 出 了 二 维 数组 声明 和 初始 化 的 示例 。 

【代码 4-46】 二 维 数组 声明 和 初始 化 的 示例 代码 : ts046.ts 


01 let twoArrs : string[][] = new Array<Array<string>>(); 

02 let twoArrs2: number[][] = new Array<Array<number>>([1,2,3],[3,4,5]); 
03 let twoArrs3 : Array<Array<string>> = []; 

04 let twoArrs4 : Array<Array<number>> = [[1,2,3],[3,4,5]]; 


当 二 维 数组 声明 并 初始 化 之 后 ， 就 可 以 对 其 进行 赋值 或 修改 具体 某 个 元 素 的 值 了 。 代 码 
4-47 给 出 了 二 维 数 组 的 基本 用 法 示例 。 
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01 let towArrs: number[][] = []; 
02 towArrs[0] = [1, 2, 3]; 

03 OWwArrs[li] = [3 47 Ss 

04 towArrs[0][1] = 6; // 修 改 
05 console.log (towArrs); 


在 代码 4-47 中 ，01 行 首先 声明 了 一 个 数值 类 型 的 二 维 数组 ， 且 初始 化 为 空 数组 。02 和 
03 行 分 别 用 一 个 一 维 数组 赋值 给 二 维 数组 的 行 。 可 以 通过 行 和 列 索引 访问 二 维 数组 中 的 某 个 
具体 元 素 ， 如 修改 二 维 数组 的 值 。04 行 通过 towArrs[0][1] 获 取 二 维 数组 第 0 行 第 1 列 的 元 素 ， 


并 赋值 为 6。 二 维 数组 的 下 标 索引 示意 图 如 图 4.4 所 示 。 


v (2) [Array(3), Array(3)] 
OO": Array(3) 
@:1 
1: 2 [1][2] 是 5 


ET 7 
@ri Array(3) 


@: 3 


: Array(9) 


bp__proto__: Array(9) 


图 4.4 二 维 数组 下 标 索引 示意 图 


以 代码 4-46 中 的 twoArrs4 二 维 数组 为 例 ， 它 的 初始 值 为 [[1.2,.3],[3,4.5]]， 也 就 是 有 2 行 
3 列 。twoArrs4[0] 的 值 为 [1,2,3] ，twoArrs4[1] 的 值 为 [3,4,5]] ，twoArrs4[1,2] 则 表示 第 1 行 第 


2 列 的 值 ， 也 就 是 5。 


多 维 数组 的 循环 和 一 维 数组 类 似 ， 只 是 需要 嵌 套 循环 而 已 。 代 码 4-48 给 出 二 维 数组 循环 


的 示例 。 
【代码 4-48】 二 维 数组 循环 示例 代码 : ts048.ts 


01 let towArrs: number[][] = []; 
02 towArrs[0] = [1, 2, 3]; 

03 towArrs[1] = [3, 4, 5]; 

04 for (let row of towArrs) { 


05 for (let item of row) { 

06 console.log (item); Vs br re 
07 } 

08 | 


109 


TypeScript 实战 


| 在 02 行 处 如 果 声 明 twoArrs 数组 时 没有 指定 类 型 (lettwoArrs: [0 中 ) ， 则 在 twoArrs[0] 
[ 一 [1, 2,3] 赋 值 时 会 报错 。 


人 .2 元 组 


元 组 〈tuple) 起 源 于 函数 编程 语言 (如 F#) ， 在 这 些 语 言 中 频繁 使 用 元 组 。 数 组 合并 了 
相同 类 型 的 对 象 ， 而 元 组 合并 了 不 同类 型 的 对 象 。 


4.2.1 元 组 的 概念 和 特征 


元 组 (tuple) 是 关系 数据 库 中 的 基本 概念 ,关系 是 一 张 表 ， 表 中 的 每 行 〈 数 据 库 中 的 每 条 
记录 ) 就 是 一 个 元 组 ， 每 列 就 是 一 个 属性 。 在 二 维 表 里 ， 元 组 也 称 为 行 。 元 组 可 以 是 不 同类 
型 的 对 象 集合 。 

元 组 有 如 下 特点 : 


@ 元 组 的 数据 类 型 可 以 是 任何 类 型 。 

在 元 组 中 ， 可 以 包含 其 他 元 组 。 

元 组 可 以 是 空 元 组 。 

元 组 赋值 必须 元 素 类 型 兼容 。 

元 组 的 取 值 同 数 组 的 取 值 ， 元 素 的 标号 从 0 开始 。 
元 组 可 以 作为 参数 传递 给 函数 。 


元 组 的 声明 和 初始 化 与 数组 比较 类 似 , 只 是 元 组 中 的 各 个 元 素 类 型 可 以 不 同 。 需 要 注意 元 
组 和 数组 声明 在 语法 上 的 区 别 : 数组 是 datatype[]， 而 元 组 是 [datatypel,datatype2, .…]。 下 面 给 
出 一 个 元 组 的 示例 : 


let row: [number, string, number] = [1, "jack", 99]; 


攻 寺 元 组 声明 的 时 候 [] 中 的 类 型 不 能 省 略 ， 且 初始 化 的 个 数 必须 和 声明 中 的 类 型 个 数 一 致 ， | 
[ 则 报错 。 


上 面 用 let 声明 了 一 个 类 型 为 [number, string, number] 的 元 组 row。 将 上 面 的 代码 稍 做 修 
改 后 则 不 是 元 组 ， 而 是 一 个 联合 类 型 的 数组 : 
let row2 = [1, "jack", 99]; //(string | number) [] 


在 上 述 代 码 中 ，TypeScript 编译 器 会 认为 是 声明 了 一 个 (string | number) 类 型 的 数组 。 虽 然 
二 者 看 起 来 比较 类 似 ， 但 是 在 赋值 的 时 候 差异 还 是 比较 大 的 。 
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元 组 row 是 [number, string, number] 类 型 的 ， 所 以 第 一 个 元 素 必须 是 数值 ， 第 二 个 元 素 必 
须 为 文本 ， 第 三 个 元 素 必须 为 数值 。 (string | number) 类 型 的 数组 row2 则 可 以 存储 零 个 或 多 
个 值 ， 而 且 值 可 以 是 数值 或 者 字符 ， 顺 序 不 要 求 。 
值得 一 提 的 是 ， 可 以 将 any 类 型 的 变量 赋值 给 元 组 。 代 码 4-49 给 出 了 将 any 类 型 的 变量 
赋值 给 元 组 的 示例 。 
【代码 4-49】 将 any 类 型 的 变量 赋值 给 元 组 示例 代码 : ts049.ts 


01 let a: any = true; 
02 let row: [number, string, number] = [1, "jack",al]; 


4.2.2 访问 元 组 中 的 值 

访问 元 组 中 的 值 和 访问 数组 中 的 元 素 类 似 , 最 基本 的 方法 是 通过 下 标定 位 元 素 , 下 标 是 从 
0 开始 ， 只 是 数组 返回 的 值 是 同一 个 类 型 的 ， 而 元 组 中 的 值 可 以 是 不 同类 型 的 。 代 码 4-50 给 
出 了 访问 元 组 元 素 的 示例 。 
【代码 4-50】 访问 元 组 元 素 示 例 代码 : ts050.ts 


01 ”// 声 明 一 个 元 组 
02 let x: [string, number] = ["jack", 10.9]; 


03 ”// 访 问 值 
04 console.1log (x[0]); //"jack" 
05 console.log(x[1] .toFixed(2)); //10.90 


06 ”// 越 界 访问 
07 console.1log (x[2]); // 错 误 ， 越界 


革 下 | 当 访问 一 个 已 知 索引 的 元 素 时 会 得 到 正确 的 类 型 ， 当 访问 一 个 越界 的 元 素 时 会 出 现 错误 。 


在 代码 4-50 中 ， 首 先 声明 了 一 个 名 为 x 的 元 组 ， 第 一 个 类 型 是 字符 串 ， 第 二 个 类 型 是 数 
值 型 ， 因 此 ，02 行 在 赋值 的 时 候 ， 第 一 个 必须 为 字符 类 型 的 值 "jack"， 第 二 个 必须 为 数值 类 型 
的 值 10.9， 而 且 个 数 不 能 多 ， 也 不 能 少 ， 和 否则 都 会 出 现 错误 。04 行 用 下 标 访问 了 元 组 的 第 一 
个 元 素 ，x[0] 输 出 字符 "jack"， 当 用 x[1] 获 取 第 二 个 数据 时 ， 编 译 器 知道 其 数据 类 型 为 数值 型 ， 
可 以 调用 数值 的 方法 toFixed 来 输出 ， 结 果 为 10.90。 第 07 行进 行 了 越界 访问 ， 和 数组 不 同 ， 
元 组 的 个 数 是 确定 的 ， 不 能 进行 越界 访问 ， 编 译 器 会 显示 错误 。 元 组 和 数组 一 样 ， 也 可 以 对 元 
素 进行 遍历 。 代 码 4-51 给 出 用 for..of 对 元 组 遍历 的 示例 。 


【代码 4-51】 用 for.…of 对 元 组 遍历 示例 代码 : ts051.ts 


01 let row: [number, string, number] = [1, "jack", 99]; 
02 for (let item of row) { 

03 console.1log (item); 

04 } 


qi 


元 组 也 可 以 用 for…in 进行 遍历 。 代 码 4-52 给 出 用 for...in 对 元 组 遍历 的 示例 。 
【代码 4-52】 用 for...in 对 元 组 遍历 示例 代码 : ts052.ts 


01 let row: [number, string, number] = [1, "jack", 99]; 
02 for (let item in row) { 
03 console.log (row[item]); 
04 } 
元 组 对 象 本 身 也 有 类 似 数组 的 方法 , 比如 forEach、 push 和 pop 等 。 因 此 , 也 可 以 用 forEach 
方法 对 元 组 进行 遍历 。 代 码 4-53 给 出 用 forEach 对 元 组 遍历 的 示例 。 
【代码 4-53】 用 forEach 对 元 组 遍历 示例 代码 : ts053.ts 


01 let row: [number, string, number] = [1, "jack", 99]; 


02 row.forEach (function (value, index) { 
03 console.log (value); 
04 和 


4.2.3 ”元 组 操作 (push 和 pop) 

和 数组 类 似 , 元 组 也 可 以 添加 和 删除 元 素 。 元 组 和 数组 不 同 的 是 , 元 组 不 能 通过 越界 的 下 
标 直接 往 元 组 中 追加 元 素 。 元 组 追加 新 元 素 可 以 用 push 方法 ， 删 除 元 素 则 用 pop 方法 。 

1. push 方 法 

push 方法 向 元 组 末尾 添加 元 素 ， 一 次 可 以 添加 1 个 或 者 多 个 元 素 ， 多 个 元 素 用 逗号 分 隔 。 
这 里 push 的 元 素 必 须 和 元 组 中 各 个 元 素 类 型 兼容 ， 否 则 不 允许 添加 ， 会 报错 。 代 码 4-54 给 出 
用 push 对 元 组 追加 新 元 素 的 示例 。 
【代码 4-54】 用 push 对 元 组 追加 新 元 素 示例 代码 : ts054.ts 


01 let mytuple: [number, string] = [10, "Hello"]; 
02 let len = mytuple.length; 

03 console.log (len); 2 

04 //mytuple[2] = "3"; // 错 误 

05 mytuple.push(12,"!1"); 

06 ”// 类 型 不 是 stringlnumber 


07 //mytuple.push (true); // 错 误 
08 console.log (mytuple.length) 7 //4 
09 console.1og (mytuple); li0r “Hollor lor SE] 


在 代码 4-54 中 , 01 行 创建 了 一 个 [number,string] 类 型 的 元 组 mytuple, 它 有 2 个 元 素 , length 
为 2.04 行 试图 用 mytuple[2] = "3" 给 元 组 扩容 , 但 是 编译 器 会 提示 错误 。05 行 调用 元 组 mytuple 
的 push 方法 ， 一 次 性 添加 了 2 个 元 素 ， 此 时 元 组 长 度 为 4， 值 为 [10, "Hello",12, "!"]。 


全 人 


2. pop 方法 


pop 方法 从 元 组 中 移 除 最 后 一 个 元 素 ， 并 返回 
pop 删除 元 组 最 后 一 个 元 素 的 示例 。 


移 除 的 元 素 ， 长 度 减 1。 代 码 4-55 给 出 用 


【代码 4-55】 pop 删除 元 组 元 素 示例 代码 : ts055.ts 


01 let mytuple: [number, string] = [10, "Hello"]; 
02 let len = mytuple.length; 
03 console.log (len); Pte 
04 let ele = mytuple.pop(); 
05 console.1log (mytuple.1length); //1 
06 console.log (ele); //"Hello" 
4.2.4 ”元 组 更 新 


元 组 是 可 变 的 , 这 意味 着 可 以 对 元 组 进行 更 新 
访问 元 组 中 的 元 素 并 进行 赋值 来 完成 更 新 。 代 码 4 
【代码 4-56】 更 新 元 组 示例 代码 : ts056.ts 


操作 。 当 元 组 初始 化 后 ， 可 以 直接 通过 下 标 
-56 给 出 更 新 元 组 的 示例 。 


01 let mytuple: [number, string] = [10, "Hello"]; 
02 ”// 更 新 

03 mytuple[0] = 20; 

04 mytuple[1] = "my"; 

05 ”// 更 新 必须 兼容 类 型 ， 此 处 报错 

06 //mytuple[1] = true; 

07 console.log (mytuple); //[20,"my"] 


总 更 新 时 ， 一 是 不 能 越界 ， 二 是 对 赋值 的 类 型 必须 和 原 类 型 兼容 ， 否 则 报错 。 


4.2.5 ”元 组 解构 


元 组 解构 和 数组 解构 类 似 , 也 可 以 把 元 组 元 素 赋 


值 给 多 个 变量 , 只 是 解构 出 来 的 各 个 元 素 


可 能 是 不 同类 型 的 。 代 码 4-57 给 出 元 组 解构 的 示例 。 


【代码 4-57】 元 组 解构 示例 代码 : ts057.ts 
01 let mytuple: [number, string,string,string] = [10, "Hello", "World", 
"typeScript"]; 
02 ”// 元 组 解构 
03 let [a, b, c, d] = mytuple; 
04 //let [a,b,c,d,e] = mytuple; // 不 能 越界 解构 
05 console.1o0g(a); //10 
06 console.1og(b); //"Hello" 
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07 
08 
09 
10 
11 


console.log(c); //"World" 
console.1o0g(d); //"typeScript" 
let [x,y] = mytuple; 

console.1log (x); //10 
console.log(y); //"Hello™ 


元 组 解构 可 以 让 我 们 的 代码 更 加 简洁 。 


必 寺 | 元 组 解构 时 ， 不 能 越界 解构 ， 否 则 报错 。 | 


4. 了 3 适 代 器 和 生成 器 


从 代 器 (Iterator) 和 生成 器 (Generator) 是 ES6 规范 中 新 引入 的 特征 。 由 于 TypeScript 
是 遵循 ES6 规范 的 ， 因 此 支持 迭代 器 和 生成 器 。 和 迭代 器 和 生成 器 本 质 上 都 是 一 种 函数 ， 因 此 
本 节 会 涉及 很 多 函数 的 用 法 ,这 里 读者 可 以 先 不 用 太 关注 函数 的 语法 , 先 了 解 有 这 种 用 法 即 可 。 


4.3.1 


用 循环 语句 迭代 数据 时 ,必须 初始 化 一 个 变量 来 记录 每 一 次 迭代 在 数据 集合 中 的 位 置 。 夺 
代 器 的 使 用 可 以 极 大 地 简化 循环 数据 操作 。 这 个 新 特性 对 于 高 效 的 数据 迭代 处 理 而 言 是 非常 重 
要 的 。 在 语言 的 其 他 特性 中 也 都 有 迭代 器 的 身影 ， 如 for..of 循环 本 身 就 使 用 到 了 过 代 器 。 如 
果 一 个 对 象 实现 了 迭代 器 ， 就 可 以 利用 for...of 进行 循环 访问 了 。 

迭代 器 是 一 种 特殊 对 象 , 具有 一 些 专门 为 欠 代 过 程 设计 的 专 有 接口 。 所 有 的 友 代 器 对 象 都 
有 一 个 next() 方 法 ， 每 次 调用 都 返回 一 个 结果 对 象 。 

结果 对 象 有 两 个 属性 : 一 个 是 value， 表 示 下 一 个 将 要 返回 的 值 ， 另 一 个 是 done， 是 一 个 
布尔 类 型 的 值 。 当 没有 更 多 可 返回 数据 时 返回 true。 

迭代 器 还 会 保存 一 个 内 部 指针 ， 用 来 指向 当前 集合 中 值 的 位 置 ， 每 调用 一 次 next() 方 法 ， 


都 会 返 


迭代 器 


日 


下 一 个 可 用 的 值 。 如 果 在 最 后 一 个 值 返 回 后 再 调用 next() 方 法 ， 那 么 返回 的 对 象 中 属 


性 done 的 值 为 true， 属 性 value 则 包含 迭代 器 最 终 返回 的 值 ， 如 果 没 有 相关 数据 就 返回 
undefined。 

到 此 ， 感 觉 欠 代 器 还 是 比较 抽象 的 ， 不 知道 迭代 器 到 底 长 什么 样子 。 为 了 模拟 迭代 器 ， 代 
码 4-58 给 出 一 个 示例 。 


【代码 4-58】 迭代 器 示例 代码 : ts058.ts 
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01 
02 
03 
04 


function genIterator (items) { 
let i= 0; 
return { 


next: function() { 
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05 var done = (i >= items.length); 

06 var value = !done ? items[i++] : undefined; 
07 return { 

08 done: done, 

09 value: value 

10 }; 

Ll 1 

12 }; 

EE } 


14 let iterator = genIterator([1, 2, 3]); 


Ls console.log (iterator.next ()); // { value: 1, done: false } 

16 console.log (iterator.next ()); // { value: 2, done: false } 

i console.log (iterator.next ()); // { value: 3, done: false } 

18 console.log (iterator.next ()); // { value: undefined, done: true } 
19 ”// 之 后 的 所 有 调用 

20 console.log (iterator.next () ) 7 // { value: undefined, done: true } 


在 代码 4-58 中 ， 定 义 了 一 个 函数 genlterator。 该 函数 返回 的 对 象 有 一 个 next 方法 ， 每 次 
调用 时 ，items 数组 的 下 一 个 值 会 作为 value 返回 。 当 i 为 3 时 ，done 变 为 true， 此 时 三 元 表达 
式 〈06 行 ) 会 将 value 的 值 设 置 为 undefined。 最 后 两 次 调用 的 结果 与 ES6 迭代 器 的 最 终 返 回 
机 制 类 似 ， 当 数据 集合 被 迭代 完 后 ，next 方法 会 返回 一 个 value 是 undefined、done 是 true 的 
对 象 。 

上 面 这 个 示例 看 起 来 还 是 比较 复杂 的 , 而 在 TypeScript 中 , 迭代 器 的 编写 规则 也 同样 复杂 。 
TypeScript 和 ES6 一 样 引入 了 一 个 生成 器 对 象 , 它 的 主要 作用 就 是 让 创建 迭代 器 对 象 的 过 程 变 
得 更 简单 。 因 此 ， 和 迭代 器 一 般 是 用 生成 器 构建 的 。 


4.3.2 生成 器 


生成 器 是 一 种 返回 迭代 器 的 函数 , 通过 function 关键 字 后 的 星 号 (*) 来 表示 , 函数 中 会 用 到 
新 的 关键 字 yield。 星 号 和 function 关键 字 之 间 可 以 加 一 个 空格 ， 也 可 以 不 用 空格 。 生 成 器 函 
数 和 普通 函数 一 样 ， 都 可 以 被 调用 ， 但 会 返回 一 个 迭代 器 。 代 码 4-59 给 出 生成 器 的 示例 。 


【代码 4-59】 生成 器 示例 代码 : ts059.ts 


01 ”// 生成 器 

02 function *genIterator () { 
03 Yield 1; 

04 Yield 27 

05 yield 3; 

06 } 


07 ”// 调用 生成 器 ， 返 回 迭 代 器 
08 let iterator = genIterator () 7? 
09 console.log (iterator.next ()); // {value: 1, done: false} 
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10 
ll 
12 


console.log(iterator.next () .value); 2 
console.1log (iterator.next() .value) 7 | 
console.log (iterator.next () .done); // true 


在 这 个 示例 中 ，genlterator 函数 名 前 的 星 号 表明 它 是 一 个 生成 器 ; yield 是 生成 器 函数 里 面 
的 关键 ， 可 以 通过 它 来 指定 调用 返 代 器 的 next 方法 时 的 返回 值 及 返回 顺序 。 生 成 迭代 器 后 ， 
连续 3 次 调用 它 的 next 方法 返回 3 个 不 同 的 值 ， 分 别 是 1、2 和 3。 生 成 器 的 调用 过 程 与 其 他 
函数 一 样 ， 最 终 返 回 的 是 创建 好 的 从 代 器 。 


yield 关键 字 虽然 只 返回 了 值 ， 但 是 在 调用 迭代 器 的 时 候 却 每 次 返回 一 个 {fvalue: 值 , done: 
false 或 true} 的 对 象 。 


函数 返 


生成 器 函数 最 有 趣 的 部 分 是 ， 每 当 执行 完 一 条 yield 语句 后 ， 函 数 就 会 自动 停止 执行 。 举 
个 例子 ， 在 上 面 这 段 代码 中 ， 执 行 完 语句 yield 1 之 后 ， 函 数 便 不 再 执行 其 他 任何 语句 ， 直 到 
再 次 调用 迭 代 器 的 next() 方 法 才 会 继续 执行 yield 2 语句 。 

使 用 yield 关键 字 可 以 返回 任何 值 或 表达 式 ， 所 以 可 以 通过 生成 器 函数 批量 地 给 进 代 器 添 
加 元 素 。 例如， 可 以 在 循环 中 使 用 yield 关键 字 。 代 码 4-60 给 出 生成 器 通过 外 部 传 参 的 方式 构 
建 的 示例 。 


【代码 4-60】 生成 器 通过 外 部 传 参 的 方式 构建 示例 代码 : ts060.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
有 
| 


// 生成 器 


function* genIterator(items) { 


let len = items.length; 
for (let i = 0; i < len; i++) { 
yield items[i]; 

} 
六 
// 
let iterator = genIterator([1,2,3]); 
console.log (iterator.next ()); // {value: 1, done: false} 
console.log (iterator.next () .value); PA 4 
console.log (iterator.next () .value); YXES 
console.log (iterator.next () .done); // true 


在 这 个 示例 中 ， 给 生成 器 函数 genlterator 传 入 一 个 items 数组 ， 可 以 在 函数 内 部 通过 for 
循环 不 断 从 数组 中 获取 元 素 ， 并 结合 关键 字 yield 生成 新 的 元 素 放 入 友 代 器 中 。 当 调用 生成 器 


可 迭代 器 后 ， 每 遇 到 一 个 yield 语句 循环 都 会 停止 ， 每 次 调用 迭代 器 的 next 方法 ， 循 环 


会 继续 运行 并 执行 下 一 条 yield 语句 。 


二 yield 关键 字 只 可 在 生成 器 内 部 使 用 ， 在 其 他 地 方 使 用 会 导致 程序 抛 出 错误 。 | 
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另外 ， 也 可 以 通过 函数 表达 式 来 创建 生成 器 ， 只 需 在 function 关键 字 和 小 括号 中 间 添 加 一 


个 星 号 (*) 即 可 。 代 码 4-61 给 


8 生成 器 表达 式 的 示例 。 


【代码 4-61】 生成 器 表达 式 示例 代码 : ts061 .ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
El 
12 
13 


// 生成 器 表达 式 


let genIterator = function* (items) { 


let 


for 


len = items.length; 
(let 1-= 0 < lens 1++) 1 


yield items[il]; 


. 
// 


let iterator = genIterator([1,2,3]); 


console 
console 
console 


console 


.log (iterator. 
.log (iterator. 
.log (iterator. 
.log (iterator. 


next ()); // {value: 1, done: false} 
next () .value); ee 

next () .value); VY 

next () .done); // true 


区 不 能 用 箭头 函数 来 创建 生成 器 。 | 


由 于 生成 器 本 身 就 是 函数 ， 因 此 可 以 将 它们 添加 到 对 象 中 。 代 码 4-62 给 出 在 对 象 中 使 用 
生成 器 的 示例 。 


【代码 4-62】 对 象 中 使 用 生成 器 示例 代码 : ts062.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
3 
14 
15 


let genIterator = function* (items) { 


let 


len = items.length; 


for (let 1 = 0; 1 < len;s i1++) { 


yield items[i]; 


} 


let myobj = { 
genIterator: genIterator 


] 
// 


let iterator = myObj.genIterator([1,2,3]); 


console 
console 
console 
console 


.log(iterator. 
.log (iterator. 
.log(iterator. 
.log(iterator. 


next ()); // {value: 1, done: false} 
next () .value); // 2 

next () .value); AS 

next () .done) 7 // true 


在 代码 4-62 中 ,01~06 行 创建 了 一 个 生成 器 表达 式 。07~09 行 用 对 象 字 面 量 构建 了 一 个 对 
象 myObj, 并 将 genIterator 生成 器 表达 式 绑 定 到 对 象 上 .11 行 在 此 对 象 上 通过 myObij.genlterator 


调用 生成 器 返 


3 


达 代 器 。 
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可 迭代 对 象 具有 Symbol.iterator 属性 ， 是 一 种 与 迭代 器 密切 相关 的 对 象 。Symbol.iterator 


通过 指定 的 函数 可 以 返回 一 个 作用 于 附属 对 象 的 迭代 器 。 所 有 的 集合 对 象 (如 数组 ) 和 字符 串 


都 是 可 和 迭代 对 象 ， 这 些 对 象 中 都 有 默认 的 迭代 器 。 


由 于 生成 器 默认 会 为 Symbol.iterator 属性 赋值 ， 因 此 所 有 通过 生成 器 创建 的 迭代 器 都 是 可 
迭代 对 象 。 


代码 4-63 通过 Symbol.iterator 获取 数组 arrs 的 默认 进 代 器 ， 然 后 用 它 遍 历数 组 中 的 元 素 。 
【代码 4-63】 Symbol.iterator 获取 数组 默认 迭代 器 示例 代码 : ts063.ts 


let arrs= [1, 2, 3]; 
let iterator = arrs[Symbol.iterator] (); 
while (true) { 

let a = iterator.next (); 

if (a.done) { 

break; 
} 
else { 


console.log(a.value); A te a \ 


和 


数组 和 字符 串 都 有 默认 的 迭代 器 , 那么 如 何 给 自己 创建 的 对 象 添 加 迭代 器 , 让 它 成 为 一 个 
可 和 迭代 的 对 象 昵 ? 可 和 迭代 对 象 必须 具有 Symbol.iterator 属性 , 并 且 这 个 属性 对 应 着 一 个 能 够 返 


器 迭 代 器 的 函数 ， 因 此 只 需要 将 这 个 生成 器 函数 赋值 给 Symbol.iterator 属性 即 可 。 代 码 4-64 


给 出 如 何 让 自 定义 对 象 变 成 可 迭代 对 象 的 示例 。 
【代码 4-64】 让 自 定义 对 象 变 成 可 进 代 对 象 示例 代码 : ts064.ts 
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01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
ell 


// 创 建 可 和 迭代 对 象 
let obj = { 
items: [1,2,3], 
*[Symbol.iterator] () { 
for (let item of this.items) { 


yield item; 


} 
obj.items.push(4); 
obj.items.push(5); 
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12 ”// 必 须 开 启 --downlevelIteration 才能 和 途 代 
有] for (let num of obj) { 

14 console.1log (num); 

es } 


卫 直 默认 情况 下 , TypeScript 会 提示 错误 , 提示 必须 开启 编译 选项 --downlevellteration 才能 让 对 
[ 象 可 迭代 。 


人 44.4 小 结 


本 章 主要 对 数组 和 元 组 进行 了 比较 详细 的 介绍 , 包括 对 数组 和 元 组 的 声明 和 初始 化 , 以 及 
元 素 访问 和 遍历 。 最 后 介绍 了 一 些 迭 代 器 和 生成 器 的 相关 概念 和 示例 。 
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在 现实 生活 中 ， 有 很 多 因素 和 另外 一 些 因素 相关 ,它们 之 间 存 在 某 种 对 应 法 则 。 从 理论 上 
来 讲 ， 这 些 因 素 和 对 应 法 则 可 以 用 数学 函数 来 描述 。 举 个 例子 ， 人 的 体重 主要 和 身高 、 年 龄 以 
及 性 别 有 关 ， 那 么 就 可 以 用 一 个 函数 来 表示 它们 之 间 的 关系 ， 如 体重 A 身高， 年 龄 ， 性 别 ) 。 

函数 (function》 最 早 由 中 国清 朝 数学 家 李 善 兰 翻译 ， 出 于 其 著作 《代数 学 》。 之 所 以 这 
么 翻译 ,他 给 出 的 原因 是 “ 凡 此 变数 中 函 彼 变 数 者 ， 则 此 为 彼 之 函数 ”， 即 函数 是 指 一 个 量 随 
着 另 一 个 量 的 变化 而 变化 ， 或 者 说 一 个 量 中 包含 男 一 个 量 。 

函数 在 TypeScript 语言 中 非常 重要 ， 本 身 可 以 独立 解决 某 类 问题 ， 并 且 是 抽象 的 ， 具 有 广 
泛 的 适用 性 。 函 数 可 以 提高 代码 复 用 性 ， 同 时 让 代码 更 加 容易 维护 。 很 多 语言 中 的 系统 API 
方法 本 质 上 都 是 一 种 函数 。 使 用 者 无 须 过 多 关注 方法 内 部 实现 的 细节 , 只 要 搞 清楚 输入 参数 是 
什么 ， 能 得 到 什么 结果 即 可 。 

函数 可 以 看 作 是 一 种 对 现实 客观 规律 的 抽象 ， 是 对 某 种 具体 问题 的 建 模 。TypeScript 中 很 
多 对 象 的 方法 本 质 上 就 是 函数 ， 是 用 来 定义 对 象 行为 的 。TypeScript 中 若 没 有 函数 ， 就 相当 于 
鱼 儿 不 能 在 水 中 游 ， 鸟 儿 不 能 在 天 上 飞 。 由 此 可 见 ， 函 数 对 于 TypeScript 语言 的 重要 性 。 掌 握 
好 函数 ， 可 以 让 我 们 写 出 更 简洁 、 可 复 用 的 代码 供 他 人 使 用 。 函 数 就 是 一 种 服务 。 

本 章 主 要 涉及 的 知识 点 有 : 


@ 函数 的 定义 和 调用 : 学 会 如 何 声明 一 个 函数 ， 以 及 如 何 进行 调用 。 

@。 函数 的 参数 及 其 分 类 : 学 会 函数 中 可 选 参 数 、 剩 余 参 数 、 默 认 参 数 等 基本 用 法 。 
@ 特殊 函数 的 语法 : 学 会 匿名 函数 、 递 归 函 数 和 Lambda 等 函数 的 基本 用 法 。 

@ ”函数 和 数组 的 组 合 应 用 : 可 以 将 数组 传递 给 函数 ， 也 可 以 从 函数 返回 数组 。 


与 . 1。 一 个 完整 的 函数 


在 JavaScript 中 ， 函 数 是 应 用 程序 的 基础 。JavaScript 中 很 多 高 级 功能 都 是 建立 在 函数 基 
础 上 的 。JavaScript 可 以 通过 函数 实现 对 象 方法 、 模 拟 类 、 信 息 隐 藏 和 模块 等 高 级 功能 。 
无 论 是 方法 还 是 事件 或 构造 器 , 它们 的 本 质 都 是 函数 。 在 TypeScript 里 , 虽然 已 经 支持 类 、 


命名 空间 和 模块 ， 但 是 函数 仍然 是 主要 定义 对 象 行为 的 方式 。TypeScript 为 JavaScript 函数 添 
加 了 额外 的 功能 ， 让 我 们 可 以 更 容易 地 使 用 它 。 


5.1.1 定义 函数 
函数 是 一 个 独立 的 作用 域 ， 函 数 体 中 可 以 包含 多 条 语句 ， 并 作为 一 个 整体 一 起 执行 。 
TypeScript 和 JavaScript 一 样 ， 可 以 创建 有 名 字 的 函数 〈 普 通 函 数 ) 和 匿名 函数 。 
函数 定义 的 规则 有 : 
@ 上 声明 (定义 ) 函数 必须 加 function 关键 字 。 
@ 函数 名 与 变量 名 一 样 ， 命 名 规则 按照 标识 符 规 则 。 
@ ”函数 参数 可 有 可 无 ， 多 个 参数 之 间 用 过 号 隔 开 , 每 个 参数 由 名 字 与 类 型 组 成 ， 之 间 用 
冒号 隔 开 。 
@。 函数 的 返回 值 可 有 可 无 ， 没 有 时 返回 类 型 为 void， 需 要 时 可 添加 别 的 类 型 。 
@ ”大 括号 中 是 函数 体 ， 函 数 体内 声明 的 变量 作用 域 在 此 函数 内 ， 函 数 体 外 无 法 访问 内 部 
声明 的 变量 。 


那么 如 何 声明 一 个 函数 呢 ? 函数 声明 必须 告诉 TypeScript 编译 器 函数 的 名 称 、 返 回 类 型 和 
参数 。 函 数 体 提供 了 函数 的 实际 处 理 过 程 和 逻辑 。 函 数 参 数 往往 有 形 参 和 实 参 的 区 别 ， 比 如 定 
义 一 个 函数 add(a:number, b:number)， 这 里 的 a 和 b 就 是 形 参 。 当 用 add(1, 2) 进 行 函数 调用 的 
时 候 ， 这 里 的 1 和 2 就 是 实 参 。 

在 TypeScript 中 可 以 用 几 种 方式 来 定义 函数 。 


1. 函数 声明 
函数 声明 定义 了 一 个 具有 指定 参数 的 函数 。 函 数 声 明 的 语法 为 : 


function 函数 名 (参数 1 :类 型 ,参数 2 :类 型 , . . . ,参数 n: 类 型 ) :类 型 
// 执行 代码 
1 


圭 函数 返回 类 型 会 自动 进行 类 型 推 世 ， 一 般 可 以 省 略 。 | 


语法 说 明 如 下 : 

函数 名 在 函数 声明 中 是 必需 的 , 函数 名 必须 符合 标识 符 的 规则 , 它 在 function 关键 字 后 面 ， 
二 者 用 空格 隔 开 。 函 数 名 在 后 续 可 以 代表 函数 本 身 ， 供 外 部 进行 调用 。 

函数 的 参数 可 以 是 一 个 或 者 多 个 ， 也 可 以 没有 参数 ， 但 是 小 括号 0 不 能 省 略 。 函 数 参 数 由 
参数 名 和 参数 类 型 构成 , 中间 用 冒号 分 隔 。 不 同 的 参数 之 间 用 逗号 分 隔 。 参 数 名 也 要 按照 标识 
符 的 规则 进行 命名 。 不 同 引擎 中 的 最 大 参数 数量 不 同 ， 一 般 最 大 不 超过 255 个 参数 。 函 数 的 参 
数 决 定 了 函数 需要 外 界 传 入 什么 数据 。 

函数 返回 类 型 一 般 可 以 明确 指定 函数 的 返回 值 类 型 ， 也 可 以 不 指定 ，TypeScript 会 自动 进 
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行 类 型 推断 来 确定 函数 返回 类 型 。 在 函数 体 中 , 如 果 没有 retum 语句 , 那么 此 函数 默认 为 void 
类 型 。 如 果 有 retum 语句 ， 那 么 return 值 的 类 型 必须 和 函数 指定 的 返回 类 型 兼容 ， 否 则 报错 。 
函数 返回 值 决 定 了 函数 根据 外 界 输入 产生 什么 输出 。 
函数 体 是 包含 在 一 对 大 括号 里 面 的 代码 块 。 函数 体 中 主要 定义 了 函数 的 处 理 逻 辑 , 也 决定 

了 函数 的 功能 。 函 数 体 相当 于 一 个 黑 盒 ， 它 决定 了 输入 参数 如 何 产 生 输 出 结果 。 

如 果 把 函数 比 作 一 个 汽车 的 发 动机 ,那么 输入 参数 就 是 汽油 ， 函 数 体 就 是 内 燃 机 ， 函 数 返 
值 就 是 驱动 力 。 

函数 声明 定义 的 函数 可 以 称 为 普通 函数 , 也 叫 命名 函数 。 代 码 5-1 给 出 了 函数 声明 的 示例 。 
【代码 5-1】 函数 声明 示例 代码 : ts001.ts 


也 


01 ”// 命 名 函数 
02 function add(x:number, y:number) :number{ 
03 return x + y; 


04 } 


代码 5-1 中 定义 了 一 个 命名 函数 add， 其 中 包含 两 个 类 型 都 为 number 的 参数 x 和 y, 函数 
的 返回 类 型 也 是 number， 函 数 体 中 就 一 个 语句 ,返回 x 和 y 的 和 。 函 数 返回 值 类 型 为 数值 型 。 


2. 函数 表达 式 
函数 表达 式 用 function 关键 字 在 一 个 表达 式 中 定义 一 个 函数 ， 基 本 语法 为 : 


let 或 var 函数 表达 式 名 = function 函数 名 (参数 1 :类 型 ,参数 2 :类 型 , . . . ,参数 n: 类 型 ) :类 
型 
| 
// 执行 代码 
} 


函数 表达 式 从 语法 上 看 起 来 是 将 函数 声明 赋值 给 了 一 个 变量 。 在 函数 表达 式 中 , 函数 名 可 
以 省 略 ， 此 时 函数 就 是 匿名 函数 ， 即 function 关键 字 后 直接 就 是 小 括号 。 一 般 来 说 ， 单 独 定 义 
一 个 匿名 函数 是 没有 意义 的 , 因为 定义 后 无 法 继续 调用 , 因此 匿名 函数 一 般 都 是 出 现在 函数 表 
达 式 中 。 这 个 函数 表达 式 名 可 以 作为 函数 对 象 ， 在 后 续 进 行 调 用 。 代 码 5-2 给 出 了 函数 表达 式 
的 示例 。 


在 函数 表达 式 中 ， 函数 名 只 是 函数 体 中 的 一 个 本 地 变量 。 外 部 并 不 能 通过 函数 名 来 | 
| 调用 函数 。 


【代码 5-2】 函数 表达 式 示 例 代码 : ts002.ts 


01 ”// 函 数 表达 式 

02 let add = function(x:number, y:number) :number{ 
03 return x + y; 

04 } 
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在 代码 5-2 中 ， 通 过 函数 表达 式 定义 了 一 个 匿名 函数 ， 这 个 函数 有 两 个 参数 x 和 y， 都 是 
数值 类 型 的 。 函 数 体 中 用 return 返回 x 和 y 的 和 。 函 数 返回 值 类 型 为 数值 型 。 
前 面 提 到 , 在 函数 表达 式 中 , 函数 名 只 是 函数 体 中 的 一 个 本 地 变量 ， 外 部 并 不 能 通过 函数 
名 来 调用 函数 。 这 段 话 究竟 如 何 理解 呢 ? 请 看 下 面 的 代码 5-3。 
【代码 5-3】 函数 表达 式 中 函数 名 调用 示例 代码 : ts003.ts 


01 let a = function add(x:number,y:number) :number { 


02 return x + Y7 
03 } 
04 console.log(a(2,3)); AS 


05 console.1log(add(2,3)); // 错 误 


在 代码 5-3 中 ，05 行 是 错误 的 ， 无 法 调用 。 函 数 表达 式 中 虽然 声明 了 函数 名 为 add， 但 是 
它 只 在 函数 体内 可 见 ， 外 部 不 可 见 。 因 此 函数 表达 式 只 能 用 函数 表达 式 名 进行 函数 调用 。 

函数 表达 式 一 般 都 是 匿名 的 , 如果 给 出 函数 名 , 那么 这 个 函数 表达 式 则 称 为 命名 函数 表达 
式 Cnamed function expression) 。 如 果 函 数 表达 式 中 有 递归 这 种 场景 ， 也 就 是 自己 需要 调用 自 
己 ， 那 么 必须 用 命名 函数 表达 式 。 代 码 5-4 给 出 一 个 求 阶乘 的 函数 表达 式 ， 此 函数 中 有 递归 的 
示例 用 法 。 


【代码 5-4】 阶乘 的 函数 表达 式 示例 代码 : ts004.ts 
01 ”// 命 名 函数 表达 式 


02 let func= function factorial(n: number): number { 


03 if (nn <= 1) { 

04 return 1; 

05 

06 else { 

07 return n * factorial(n - 1); // 需 要 函数 名 factorial 
08 上 

09 } 

10 console.log (func (3)); //6 


在 代码 5-4 中 , 用 函数 表达 式 定义 了 一 个 求 阶乘 的 函数 factorial。 由 于 阶乘 是 自己 要 调用 
自己 的 一 种 函数 ,因此 必须 给 此 函数 表达 式 命名 ,在 函数 体内 只 能 用 此 函数 名 来 进行 递归 调用 ， 
不 能 用 函数 表达 式 名 来 递归 。 

被 函数 表达 式 赋值 的 变量 会 有 一 个 name 属性 ， 如 果 你 把 这 个 变量 赋值 给 另 一 个 变量 ， 那 
么 这 个 name 属性 的 值 也 不 会 改变 。 

如 果 函 数 表 达 式 中 的 函数 是 一 个 匿名 函数 ,那么 name 属性 的 值 就 是 被 赋值 的 变量 的 名 称 。 
如 果 函 数 不 是 匿名 的 ， 那 么 name 属性 的 值 就 是 这 个 函数 的 名 称 ， 有 具体 如 代码 5-5 所 示 。 


【代码 5-5】 函数 表达 式 name 属性 示例 代码 : ts005.ts 


01 let add = function (n: number) { 
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02 rotorn DD * 2 

03 } 

04 console.log(add.name); //add 

05 let add2 = add; 

06 console.1log(add2 .name) 7 //add 

07 let add3 = function funcName (n: number) { 
08 return Dn * 2 

09 } 

10 console.1log(add3.name); //funcName 


在 代码 5-5 中 ，01~03 行 定义 了 一 个 名 为 add 的 函数 表达 式 ， 此 函数 是 一 个 匿名 函数 。04 
行 打 印 add 函数 表达 式 的 name 属性 为 add。05 行将 add 函数 表达 式 赋值 给 另 一 个 变量 add2， 
06 行 打印 add2 变量 的 name 属性 也 是 add。07~09 行 定义 了 一 个 命名 的 函数 表达 式 ， 当 打印 
add3 的 name 属性 时 ， 输 出 的 是 函数 名 funcName。 

3. 箭头 函数 表达 式 

箭头 函数 表达 式 的 语法 比 函 数 表达 式 更 简洁 ， 并 且 没 有 自己 的 this 和 arguments 等 内 部 变 
量 。 箭 头 函 数 表达 式 不 能 用 作 构造 函 数 。 箭 头 函 数 表达 式 的 基本 语法 为 : 

let 或 var 箭头 表达 式 名 = (参数 1 :类 型 ,参数 2 :类 型 , . . . ,参数 n :类 型 ) => { 

// 执行 代码 

1 

箭头 函数 表达 式 也 是 一 个 匿名 函数 .引入 箭头 函数 的 优点 就 是 更 简短 的 函数 定义 且 不 绑 定 
this。 箭 头 函 数 表 达 式 是 用 箭头 符号 〈=>) 连接 函数 参数 部 分 和 函数 体 部 分 。 

如 果 参 数 只 有 一 个 ， 并 省 略 参 数 的 类 型 ， 就 可 以 将 圆 括号 省 略 ; 如 果 是 一 个 参数 且 有 参数 
类 型 ， 那 么 圆 括号 不 能 省 略 。 在 函数 体 中 ， 如 果 只 有 一 条 语句 ， 那 么 可 以 省 略 大 括号 ， 否 则 不 
能 省 略 。 代 码 5-6 给 出 箭头 表达 式 的 示例 。 

【代码 5-6】 箭头 表达 式 示 例 代 码 : ts006.ts 


01 let add = (a: number, b: number) => { 


02 return a+b; 
03 ] 
04 console.log(add(2, 3)); A 


在 代码 5-6 中 ， 用 第 头 表 达 式 创建 了 一 个 函数 表达 式 。 它 有 两 个 参数 ， 一 个 是 数值 类 型 的 
a， 一 个 是 数值 类 型 的 b。 函 数 体 中 return 返回 了 a 和 b 的 和 。 当 箭头 表达 式 中 定义 的 函数 只 
有 一 个 参数 且 没 有 指定 参数 类 型 时 ， 那 么 圆 括号 可 以 省 略 ， 如 代码 5-7 所 示 。 
【代码 5-7】 箭头 表达 式 圆 括号 省 略 示例 代码 : ts007.ts 


01 let add =a=> a+3; WA 
02 console.1log(add (2)); /5 
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二 代码 5-7 中 01 行 若 改 成 “letadd = anumber=>a+3:” 则 报错 。 此 时 国 括号 不 能 省 略 。 | 


4. Function 对 象 

Function 对 象 可 以 定义 任何 函数 。 用 Function 类 直接 创建 函数 的 语法 如 下 : 

let 或 var 函数 名 = new Function (参数 1， 参 数 2，.. .， 参 数 N， 函 数 体 ) 

在 Function 构造 函数 的 参数 中 ， 比 较 特殊 的 是 最 后 一 个 参数 ， 最 后 一 个 参数 代表 的 是 函 


数 主体 的 文本 代码 。 前 面 定 义 的 参数 都 为 这 个 函数 名 的 参数 。 这 些 参数 必须 是 字符 串 ， 不 能 是 
语句 。 代 码 5-8 给 出 Function 定义 函数 的 示例 。 


【代码 5-8】 Function 创建 函数 示例 代码 : ts008.ts 


01 let fnHello = new Function("msg", "console.log(\"Hello \" + msg);"); 
02 fnHello ("World"); //"Hello World" 


| 尽管 可 以 使 用 Function 构造 函数 创建 函数 ， 但 最 好 不 要 使 用 它 ， 因 为 用 它 定义 函数 比 用 
传统 方式 要 慢 得 多 。 不 过 ， 所 有 函数 都 应 看 作 Function 类 的 实例 。 


5.1.2 ”调用 函数 

定义 函数 以 后 ， 如 果 外 部 不 调用 函数 ， 那么 函数 体内 的 代码 是 不 会 执行 的 。 函数 只 有 通过 
调用 才 可 以 执行 函数 内 的 代码 ， 函 数 就 是 为 被 外 界 调用 而 生 的 。 

在 TypeScript 中 ， 函 数 调用 主要 有 以 下 几 种 方式 。 

1. 函数 模式 

前 面 提 到 ,定义 函数 主要 有 函数 声明 、 函 数 表达 式 和 箭头 函数 表达 式 。 其 中 ， 函 数 声明 一 
般 为 命名 函数 , 可 以 通过 函数 名 直接 进行 调用 ;函数 表达 式 和 箭头 函数 表达 式 一 般 为 匿名 函数 ， 
不 能 根据 函数 名 来 调用 ， 而 要 用 表达 式 名 来 调用 。 

这 些 函 数 的 调用 方法 统称 为 函数 模式 。 这 也 是 函数 调用 最 基本 的 方式 。 代 码 5-9 给 出 函数 
声明 、 函 数 表达 式 和 箭头 表达 式 函 数 调用 的 基本 用 法 。 
【代码 5-9】 函数 模式 调用 示例 代码 : ts009.ts 


01 ”// 函 数 声明 
02 function Pow(x: number, y: number): number { 


03 return XxX ** ys 
04 Bn 
05 console.log(pow(2, 3)); //8 函数 名 pow 调用 


06 ”// 函 数 表达 式 
07 let pow2 = function (x: number, y: number): number { 


08 eturn x 克 
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09 | 

10 console.1log (pow2 (2, 3)); //8 表达 式 名 pow2 调用 
11 ”// 篆 头 函数 表达 式 

32 let pow3 = (a: number, b: number) => { 


13 return a ** by 
3 }; 
15 console.log(pow3(2, 3)); //8 表达 式 名 pow3 调用 


在 代码 5-9 中 ， 注 意 03 行 返 回 x**y 的 值 ， 其 中 幸 符 号 代表 数字 乘 寡 ， 如 2**3=2*2*2=8。 
02 行 用 函数 声明 的 方式 定义 了 函数 ， 名 为 pow， 则 可 以 用 函数 名 pow 调用 。07 行 定义 了 一 个 
函数 表达 式 ， 名 为 pow2， 在 函数 外 ， 只 能 用 表达 式 名 pow2 对 此 函数 进行 调用 。12 行 定义 了 
一 个 箭头 表达 式 ， 名 为 pow3， 在 函数 外 只 能 用 表达 式 名 pow3 对 此 函数 进行 调用 。 


二 函数 调用 中 传 入 的 实际 参数 个 数 和 类 型 必须 和 函数 声明 的 一 致 | 


函数 声明 创建 的 函数 会 被 提升 。 你 可 以 在 函数 声明 之 前 使 用 该 函数 ， 如 代码 5-10 所 示 。 
【代码 5-10】 函数 声明 提升 示例 代码 : ts010.ts 


01 console.log(add(2, 3)); LS 

02 ”// 函 数 声明 提升 

03 function add(x:number, y:number) :number{ 
04 return x + y; 

05 ; 


在 代码 5-10 中 ，01 行 就 调用 了 一 个 add 函数 ， 但 是 这 个 函数 是 在 03 行 才 定义 的 。 这 就 
说 明了 此 函数 声明 被 编译 器 提升 到 了 项 部 。 


卫 函数 表达 式 和 笛 头 函数 表达 式 不 会 像 函 数 声 明 一 样 被 提升 。 | 


为 了 验证 函数 表达 式 是 否 真 的 不 会 进行 提升 ， 用 代码 5-11 进行 测试 。 
【代码 5-11】 函数 表达 式 提升 测试 示例 代码 : ts011.ts 


01 console.1log(add(2, 3)); // 运 行 时 报错 add is not a function 
02 ”// 函 数 声明 提升 
03 Var add = function (x: number, y: number): number { 


04 return x + Y7 
05 3 
06 console.1log(add2(2, 3)); // 运 行 时 报错 add2 is not a function 


07 ”// 函 数 声明 提升 

08 Var add2 = (x: number, y: number) => { 
09 return x + y; 

10 上 
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在 代码 5-11 中 ， 注 意 到 这 里 用 var 声明 函数 表达 式 ， 而 没有 用 let 。 因 为 let 声明 的 变量 
只 能 在 声明 后 才能 调用 ， 声 明之 前 无 法 使 用 ， 编 译 器 会 在 编码 阶段 报错 。 

此 段 代 码 在 编码 阶段 没有 错误 ， 但 是 如 果 发 布 成 JavaScript 运行 的 时 候 就 会 报错 说 add 不 
是 一 个 函数 ， 没 有 定义 。 

函数 中 的 this 一 直 都 是 比较 让 人 迷惑 的 存在 。 虽然 有 规则 可 以 判断 , 但 是 如 果实 际 效果 和 
预期 有 偏差 ,最 简单 的 就 是 打印 出 this 的 值 , 这 样 就 可 以 清晰 地 看 出 当前 函数 中 this 具体 指向 
什么 对 象 了 。 

为 了 了 解 this， 首 先 应 该 了 解 函数 的 作用 域 链 。 当 在 函数 中 使 用 一 个 变量 的 时 候 ， 首 先 在 
本 函数 内 部 查找 该 变量 ， 如 果 找 不 到 就 找 其 父 级 函数 ， 最 后 直到 顶级 window， 全 局 变量 默认 
挂 载 在 window 对 象 下 。 

箭头 函数 没有 自己 的 this， 它 的 this 是 继承 父 级 对 象 而 来 的 。 默 认 情 况 下 ， 指 向 箭头 函数 
定义 时 所 处 的 对 象 〈 宿 主 对 象 ) ， 而 不 是 执行 时 的 对 象 。 

每 个 新 定义 的 函数 都 有 它 内 部 的 this 值 , 在 不 同情 况 下 this 所 指 的 对 象 是 不 同 的 。 在 函数 
声明 中 , 一 般 作为 独立 函数 调用 。 如 果 函 数 是 独立 调用 的 , 那么 this 在 严格 模式 中 为 undefined、 
在 非 严格 模式 下 为 window 对 象 。 代 码 5-12 给 出 函数 声明 在 独立 函数 调用 中 严格 模式 和 非 严 
格 模式 下 this 的 不 同 指向 示例 。 


【代码 5-12】 函数 声明 独立 函数 调用 this 示例 代码 : ts012.ts 


01 function add() { 


02 //"use strict'; // 此 函数 为 非 严格 模式 

03 //this 在 非 严格 模式 ，this 作为 全 局 对 象 window 

04 this.age = 1; 

05 console.log (this.age); //1 window.age 是 1 
06 Ss 

07 ”// 独 立 函数 调用 

08 add() 

09 function addx() { 

10 'use strict'; // 本 函数 是 严格 模式 

al //this 在 严格 模式 下 为 undefined 

12 this.age = 1; // 运 行 时 报错 this 是 undefined 
le console.log (this.age); 

El }; 

15 ”// 独 立 函数 调用 

16 addx (); 


在 代码 5-12 中 定义 了 两 个 函数 ， 其 中 函数 add 没有 启用 严格 模式 (use strict) ， 而 addX 
函数 则 启用 了 严格 模式 , 这 两 个 函数 也 就 是 模式 不 同 , 函数 体 其 他 语句 均一 致 。 我们 分 别 调用 ， 
可 以 查看 函数 体内 this 的 输出 差异 。 在 非 严 格 模式 下 ,add 函数 中 的 this 指 代 window, 将 this.age 
赋值 为 1， 就 是 将 window.age 赋值 为 1。addX 函数 是 在 严格 模式 下 运行 的 ，this 为 undefined， 
则 this.age 报错 。 
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在 函数 表达 式 中 ， 如 果 函 数 表达 式 是 独立 调用 的 ， 那 么 this 在 严格 模式 中 为 undefined、 
在 非 严格 模式 下 则 为 window 对 象 。 

在 箭头 函数 表达 式 中 没有 绑 定 this， 箭 头 函 数 不 会 创建 自己 的 this， 它 只 会 从 自己 的 作用 
域 链 的 上 一 层 继承 this。 如 果 箭 头 函 数 表 达 式 是 独立 调用 ， 那 么 this 在 严格 模式 和 非 严格 模式 
下 都 指向 父 级 的 this。 代 码 5-13 给 出 箭头 函数 表达 式 在 独立 函数 调用 时 严格 模式 和 非 严格 模 
式 下 this 的 不 同 指向 示例 。 


【代码 5-13】 箭头 函数 表达 式 独 立 函数 调用 this 示例 代码 : ts013.ts 


let add = () => { 
// 在 非 严格 模式 下 ,this 指向 父 级 this, 也 就 是 window 
this.age = 1; 
console.log (this.age); Oa 
}; 
// 独 立 函 数 调用 
add() 7 
let addx = () => { 
"use strict'; 
// 在 严格 模式 下 ,this 指向 父 级 this, 也 就 是 window 
this.age2 = 2; 
console.log (this.age2); 2 
}; 
// 独 立 函 数 调用 
addx (); 


由 代码 5-13 可 见 ， 箭 头 函 数 表 达 式 在 独立 函数 调用 时 ， 不 管 在 严格 模式 还 是 非 严 格 模式 
下 ， 函 数 体内 的 this 都 指向 父 级 作用 域 的 this。 


于 箭头 函数 this 指向 定义 时 所 处 的 对 象 宿主 对 象 ) ， 而 不 是 执行 时 的 对 象 。 | 
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2. 方法 模式 

函数 可 以 添加 到 对 象 中 , 相当 于 对 象 的 行为 ,此 时 函数 就 是 方法 。 当 函数 作为 一 个 方法 存 
在 时 ， 其 调用 和 函数 模式 存在 差异 。 在 此 种 情况 下 ， 函 数 调 用 的 方式 是 : 

对 象 . 方 法 名 (参数 . . .) 

下 面 用 对 象 字面 量 定 义 一 个 obj 的 对 象 ， 其 中 定义 了 一 个 add 方法 。add 方法 本 质 上 就 是 
一 个 函数 ， 这 里 采用 了 匿名 函数 的 方式 ， 此 函数 有 两 个 类 型 为 数值 型 的 参数 x 和 y， 在 函数 体 
中 进行 求 和 ， 并 返回 和 。 这 个 匿名 函数 被 赋值 给 obj 对 象 的 add 方法 ， 那 么 这 个 函数 必须 用 
obj.add() 才 可 以 调用 。 代 码 5-14 给 出 对 象 方法 调用 的 示例 。 


【代码 5-14】 对 象 方法 调用 示例 代码 : ts014.ts 


01 let obj = { 


02 add: function (x: number, y: number): number { 
03 return x + Y7 

04 } 

05 }; 

06 console.log (obj.add (2,3)); AS 


| 


EE 函数 名 ”来 调用 。 


当然 也 可 以 用 箭头 函数 来 定义 对 象 的 方法 。 代 码 5-15 给 出 用 箭头 函数 来 定义 对 象 方法 的 


示例 。 
【代码 5-15】 对 象 方法 调用 示例 代码 : ts015 ts 


01 let obj = { 


02 add: (x: number, y: number) => x +y, 
03 }; 
04 console.1log (obj.add (2,3)); Ws 


函数 被 作为 对 象 方法 调用 的 时 候 , 匿名 函数 和 箭头 表达 式 中 的 this 指向 什么 呢 ? 当 用 匿名 
函数 赋值 给 方法 时 ，this 为 调用 它 的 对 象 。 当 用 箭头 函数 表达 式 赋值 给 方法 时 ，this 指向 的 是 
对 象 的 父 级 中 的 this 对 象 。 代 码 5-16 给 出 函数 作为 方法 调用 时 函数 声明 和 箭头 表达 式 中 的 this 


指向 示例 。 
【代码 5-16】 对 象 方法 调用 this 指向 示例 代码 : ts016.ts 
01 let c= 0; //window.c 
02 let obj = { 
03 人 
04 add: (x: number, y: number) => x + y+ this.c, 
05 add2: function (x: number, y: number) { 
06 return x + y+ this.c; 
07 } 
08 }; 
09 console.log (obj.add (2, 3)); /1/5 
10 console.log (obj.add2(2, 3)); Wk 


在 代码 5-16 中 ，04 行 add 方法 是 用 箭头 函数 赋值 的 ，this 是 这 个 对 象 的 父 级 this， 
即 window， 也 就 是 “c=0;”， 因 此 09 行 调用 obj.add(2, 3) 时 返回 的 是 5 (2+3+0) 。05 行 用 匿 
名 函数 赋值 给 add2 方法 ，this 是 指 对 象 本 身 ， 也 就 是 obj， 因 此 10 行 调用 obj.add2(2,3) 时 值 


为 7 (2+3+2) 。 
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3. 构造 器 模式 

函数 除了 可 以 直接 调用 ， 还 可 以 通过 new 的 方式 来 调用 ， 不 过 此 时 相当 于 把 函数 当 作 构 
造 函数 来 使 用 。 下 面 创建 一 个 Person 函数 , 其 中 有 两 个 参数 , 第 一 个 参数 为 字符 类 型 的 name， 
第 二 个 参数 为 数值 类 型 的 age。 

此 函数 只 打印 了 传 入 的 name 和 age 值 ， 并 不 做 其 他 处 理 ， 因 此 推断 其 返回 类 型 是 void， 
如 果 一 个 函数 的 返回 值 是 void， 那 么 可 以 作为 构造 函数 调用 。Person 函数 的 内 容 如 代码 5-17 
所 示 。 

【代码 5-17】 Person 函数 示例 代码 : ts017 .ts 


01 function Person (name:string，age: number ) { 


02 console.1og (name，age) 
03 } 
04 let p= new Person( 'jack', 31); // 构 造 器 方法 


05 console.1log (p); 


在 代码 5-17 中 ，04 行 用 new Person 调用 该 函数 ,并 将 其 结果 赋值 给 了 变量 p。 在 05 行 对 
p 进行 输出 ， 输 出 结果 如 图 5.1 所 示 。 


vPerson 


r: f£ Person(name, age) 
s: null 

null 

:2 

“Person” 

e: {constructor: f} 
_proto_ : £() 
[[FunctionLocation]]: VM28:1 

p[[Scopes]]: Scopes[1] 
bp_proto_: Object 


> 


图 5.1 Person 对 象 的 控制 台 输 出 结果 


由 图 5.1 可 知 , 输出 的 p 中 的 constructor 构造 函数 上 确实 是 声明 的 Person 函数 。 这 里 的 函 
数 名 第 一 个 字母 大 写 ， 是 由 于 此 时 函数 被 当 作 构 造 函 数 来 用 ,为 了 表示 它 可 以 用 new 来 创建 ， 


总 函数 只 有 返回 值 为 void 的 才能 用 new 进行 调用 。 | 


在 构造 函数 中 ， 函 数 体内 的 this 是 指 自身 的 实例 对 象 。 代 码 5-18 给 出 一 个 说 明 构 造 函数 
调用 中 ， 函 数 体内 的 this 指向 为 自身 的 实例 对 象 的 示例 。 
【代码 5-18】 Person 函数 构造 器 调用 示例 代码 : ts018.ts 


01 let age = 67 
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02 function Person() { 


03 this.age = 0; 

04 console.log (this); //Person 
05 console.log (age); //6 

06 让 

07 let person = new Person(); //6 
08 console.log (person.age); //0 
09 console.log(age); //6 


在 代码 5-18 中 , 在 01 行 首先 定义 了 一 个 全 局 的 age 变量 ， 值 初始 化 为 6。02 行 定义 了 一 
个 Person 函数 ， 这 个 函数 返回 值 为 void， 且 函数 体内 给 this.age 属性 赋值 为 0， 然 后 04 行 打 
印 输出 this 值 ,05 行 打印 了 age 的 值 .07 行 用 new Person 调用 了 函数 的 构造 方法 , 会 执行 03~05 
行 的 代码 , 依次 输出 Person 对 象 实例 和 6, 说 明 函 数 体内 要 访问 内 部 的 属性 age, 必须 用 this.age， 
否则 输出 的 是 全 局 变量 age。 

在 setInterval 和 setTimeout 中 传 入 函数 时 ， 不 管 是 在 严格 模式 下 还 是 在 非 严格 模式 下 ， 函 
数 中 的 this 都 指向 window 对 象 。 代 码 5-19 给 出 在 setInterval 中 传 入 函数 的 示例 。 


【代码 5-19】 在 setlnterval 中 传 入 函数 示例 代码 : ts019.ts 


01 let age = 8; 


02 function Person() { 

03 // 如 果 在 构造 函数 调用 ，this 为 本 身 实例 
04 // 如 果 是 独立 调用 ， 如 Person () ， 则 this 为 window 
05 this.age = 0; 

06 setInterval (function () { 

07 // this 指向 window 

08 this .age++7 

09 //console.1log (this); 

10 console.log (this.age); 

Et }, 1000); 

之 } 

13 //Person(); a ee 

14 var P = new Person(); kr 


在 代码 5-19 中 ,注意 13 行 注释 了 独立 函数 调用 的 方式 Person()。14 行 用 构造 函数 进行 调 
用 ， 则 05 行 的 this.age=0 为 本 身 的 属性 ， 不 是 01 行 定义 的 age 全 局 变量 。08 行 的 this 指向 
window, 则 this.age++ 实 际 上 就 是 对 01 行 定义 的 全 局 变量 age 进行 加 1, 则 每 隔 1 秒 进行 输出 ， 
依次 输出 9、10 等 。 

如 果 将 13 行 取消 注释 、14 行 注释 掉 ， 用 独立 函数 的 方法 对 Person 进行 调用 ， 则 此 时 05 
行 的 this 在 非 严格 模式 下 是 window，05 行将 01 行 定 义 的 age 值 覆 盖 成 0， 因 此 在 08 行 又 对 
其 进行 加 1， 则 依次 输出 1、2、3 等 。 
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4. 上 下 文 模式 

上 下 文 模式 主要 是 利用 函数 的 call 和 apply 方法 改变 某 个 函数 运行 时 的 上 下 文 , 换 名 话说， 
就 是 为 了 改变 函数 体内 this 的 具体 指向 对 象 。TypeScript 的 函数 有 定义 时 上 下 文 和 运行 时 上 
下 文 区 分 ， 这 种 模式 的 函数 调用 语法 为 : 

函数 名 .apply (对 象 ， [参数 1， 参 数 2，. . .， 参数 n] ); 

函数 名 .call (对 象 ， 参 数 1， 参 数 2，. . .， 参 数 n); 

二 者 的 区 别 就 是 参数 部 分 ，apply 是 用 数组 进行 函数 参数 传递 ，call 是 用 逗号 分 隔 的 多 个 
值 进行 参数 传递 。apply 和 call 第 一 个 参数 都 是 this 要 指向 的 对 象 ， 也 就 是 为 this 指定 的 上 
下 文 。 如 果 是 在 对 象 obj 上 调用 obj.add(2,3)， 那 么 有 点 像 obj.add.apply(obj,[2,3])。 使 用 apply 
或 call 进行 函数 调用 ，this 指向 是 由 apply 或 call 的 第 一 个 参数 决定 的 。 代 码 5-20 给 出 apply 
和 call 调用 函数 的 示例 。 


【代码 5-20】 apply 和 call 调用 函数 示例 代码 : ts020.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
sl 
ge 
3 
14 
5 
16 
7 
18 
19 
20 
2 
22 
| 


function add(a: number, b: number) { 
returna+b; 
下 
let a = add.apply (null, [1, 2]); 
let b = add.call (null, 1, 2); 
console.1log(a); Wi 
console.1log(b); AS 
let numbers = [5, 458, 120, -215]; 
let maxNums = Math.max.apply (Math, numbers); //458 


let maxNums2 = Math.min.call (Math, ...numbers); //458 
console.1og (maxNums); //458 
console.1og (maxNums2); //-215 
let obj = { 
x: 99, 
}; 
let foo = { 


getV: function (y: number) { 
return this.x + y; 
} 
3 


console.log (foo.getV.call (obj, 3)); /X102 
console.log (foo.getV.apply (obj, [2])); //101 
console.log (foo.getV.apply (obj, ["2"])); //"992" 


轿 志 | apply 和 call 第 一 个 参数 也 可 以 是 null。 | 


在 代码 5-20 中 ，01~03 行 首先 用 函数 声明 的 方式 创建 一 个 名 为 add 的 函数 ， 它 有 两 个 数 
值 类 型 的 参数 ， 函 数 体 用 retum 返回 和 ， 因 此 该 函数 的 返回 类 型 可 以 推断 为 数值 类 型 。04 行 
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和 05 行 分 别 用 add 函数 中 的 apply 和 call 方法 进行 函数 调用 。 由 于 add 函数 本 身 内 部 没有 和 
this 的 关联 对 象 ， 因 此 不 需要 传 入 具体 对 象 。 注 意 第 二 个 参数 ，apply 必须 传 入 数组 ， 即 使 只 
有 一 个 参数 ， 也 必须 用 数组 ; 而 call 则 传 入 逗号 分 隔 的 值 。08~10 行 用 内 置 的 对 象 Math.max 
和 Math.min 来 计算 数组 numbers 中 的 最 大 值 和 最 小 值 。 本 身 Math.max 和 Math.min 的 基本 用 
法 为 Math.max(1,2,3) 或 者 Math.min(1,2,3), 计算 最 大 值 和 最 小 值 。 它们 都 不 能 用 于 计算 数组 的 
最 大 值 和 最 小 值 ， 但 是 可 以 借助 apply 将 其 对 数组 求 最 大 值 和 最 小 值 。 从 09 行 的 示例 代码 即 
可 求 出 数组 numbers 的 最 大 值 为 458。 第 10 行 用 call 求 最 小 值 ， 可 以 利用 展开 运算 符 对 数组 
进行 展开 。 


由 于 Math.max 和 Math.min 求 最 大 值 最 小 值 的 时 候 和 自身 this 并 没有 关系 ， 因 此 09 行 和 
[ 10 行 也 可 以 将 第 一 个 参数 设置 为 null， 不 影响 计算 结果 。 


16~20 行 定义 了 一 个 foo 对 象 ， 里 面 有 一 个 getV 函数 ， 此 函数 的 函数 体 中 需要 获取 this 
的 x 属性 值 。 其 中 13~15 行 定义 了 一 个 obj 对 象 ， 其 中 有 一 个 属性 为 x。21 行 和 22 行 分 别 调 
用 foo.getV.call 和 foo.getV.apply 的 时 候 , 第 一 个 参数 就 不 能 省 略 , 否则 不 能 计算 出 结果 (NaN)。 


| apply 和 call 调用 函数 时 ， 类 型 检查 无 效 , 23 行 中 传 入 了 一 个 字符 类 型 的 数组 也 是 可 以 的 。| 


除了 apply 和 call 以 外 ，bind 方法 也 可 以 对 函数 进行 调用 。bind 方法 会 创建 一 个 新 函数 ， 
称 为 绑 定 函数 ， 当 调用 这 个 绑 定 函数 时 ，bind 方法 的 第 一 个 参数 用 来 指定 this， 第 二 个 及 以 后 
的 参数 按照 顺序 作为 原 函 数 的 参数 来 调用 。 代 码 5-21 给 出 bind 调用 函数 的 示例 。 
【代码 5-21】 bind 调用 函数 示例 代码 : ts021.ts 


01 let obj = { 


02 .99 

03 Ye 

04 let foo = { 

05 getV: function (y: number) { 
06 return this.x + y; 

07 } 

08 Y 


09 let newFunc = foo.getV.bind(obj, 2); 
10 let a = newFunc(); 
11 console.1log(a); //101 


在 代码 5-21 中 ，09 行 用 foo.getV.bind(obj, 2) 来 调用 函数 ， 那 么 this 指向 obj 对 象 ，getV 
的 第 一 个 参数 值 为 2。 但 是 该 语句 并 未 执行 ,只 是 创建 了 绑 定 函 数 newFunc。 第 10 行 用 newFunc(O) 
对 该 函数 进行 调用 ， 则 结果 为 99+2 = 101。 
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5.1.3 ”返回 功能 

函数 可 以 看 作 是 输入 参数 和 输出 结果 的 一 种 映射 规则 。 有些 函数 没有 任何 返回 值 , 但 更 常 
见 的 是 有 返回 值 的 函数 .函数 的 强大 之 处 在 某 种 程度 上 来 说 ,恰恰 是 由 于 它 本 身 可 以 返回 结果 。 

函数 作为 一 个 可 以 复 用 的 代码 块 , 在 需要 的 时 候 可 以 进行 调用 。 在 日 常 实 战 中 , 我 们 会 希 
望 函 数 将 执行 的 结果 赋值 到 某 一 个 变量 ， 以 便 后 续 进 一 步 处 理 。 

函数 要 想 返 回 值 ， 必 须 在 函数 体 中 使 用 return 语句 实现 。 在 执行 函数 体 中 的 语句 时 ， 只 
要 遇 到 return 语句 ， 函 数 就 会 停止 执行 ， 并 返回 指定 的 值 。 

具备 返回 功能 的 函数 声明 语法 如 下 : 

function 函数 名 (参数 1: 类 型 ，. .. ， 参 数 n: 类 型 ) : 类 型 

{ 

// 其 他 代码 

return 返回 值 ; 

} 

return 关键 字 后 跟着 要 返回 的 结果 。 一 个 函数 最 终 执行 的 只 能 有 一 个 retum 语句 。 返 回 
值 的 类 型 需要 与 函数 定义 的 返回 类 型 一 致 ， 否 则 报错 。 

函数 的 返回 类 型 很 多 ， 比 如 字符 类 型 、 数 值 类 型 、 枚 举 类 型 等 。 代 码 5-22 给 出 函数 返回 
字符 串 的 示例 。 


【代码 5-22】 函数 返回 字符 串 示 例 代码 : ts022.ts 
01 ”// 返 回 一 个 字符 串 


02 function greet (msg: string): string { 


03 return "Hello " + msg; 

04 } 

05 let arg = "world"; 

06 let msg = greet (arg); 

07 console.log (msg); // Hello world 


在 代码 5-22 中 ， 声 明了 一 个 greet 函数 ， 它 有 一 个 字符 类 型 的 参数 msg， 并 且 用 return 返 


可 “Hello” 和 参数 msg 的 拼接 字符 串 。 这 个 返回 类 型 和 函数 类 型 一 致 ， 都 是 string。 在 06 行 
调用 greet 函数 ， 并 将 函数 结果 赋值 到 变量 msg 中 。07 行 在 控制 台 打 印 出 msg 的 值 为 "Hello 


world"。 
另外 ， 函 数 也 可 以 接受 数组 类 型 作为 参数 ， 这 个 常用 于 数值 计算 。 代 码 5-23 给 出 函数 将 
数组 作为 参数 的 示例 。 


【代码 5-23】 函数 将 数组 作为 参数 的 示例 代码 : ts023.ts 


01 ”// 返 回 一 个 数值 

02 function sum(args: number[]): number { 
03 let sum = 0; 

04 for (let i of args) { 
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05 Sum += i; 
06 } 

07 return sum; 
08 上 


09 let arg = [1,2,3,4]; 
10 let msg = Sum(arg) 7 
console.log (msg); //10 


在 代码 5-23 中 , 声明 了 一 个 sum 函数 , 它 有 一 个 数值 数组 类 型 的 参数 args, 并 且 用 return 


返 书 


传 入 参数 的 累加 值 ， 这 个 返回 类 型 和 函数 类 型 一 致 ， 都 是 number。09 行 定义 了 一 个 数组 


arg 并 初始 化 值 ， 作 为 调用 sum 函数 的 参数 ， 并 将 函数 结果 保存 到 变量 msg 中 。11 行 在 控制 
台 打 印 出 值 为 10 (1+2+3+4) 。 


数组 作为 一 个 函数 参数 的 好 处 是 , 数组 可 以 作为 一 个 整体 传 入 , 但 是 数组 中 的 元 素 个 数 是 


动态 的 ， 这 样 就 可 以 让 sum 函数 更 加 灵活 。 也 就 是 sum 函数 可 以 计算 很 多 个 元 素 的 和 ， 例 如 
调用 sum([2.3]) 将 返回 5、 调 用 sum([1,2,3,4,5]) 将 得 到 15。 


必 寺 函数 还 可 以 返回 一 个 函数 。 | 


函数 还 可 以 返回 枚 举 类 型 。 代 码 5-24 给 出 一 个 示例 。 


【代码 5-24】 函数 返回 枚 举 示例 代码 : ts024.ts 


01 ”// 定 义 一 个 枚 举 


02 enum Grade{ 


03 A, 
04 B, 
05 Cv 
06 D 
07 


} 
08 ”// 返 回 一 个 枚 举 


09 function getGrade (score: number): Grade { 


10 if (score > 90) { 

1 return Grade.A; 

12 } 

13 else if (score<=90 && Score >= 85) { 
14 return Grade.B; 

15 下 

16 else if (Score<85 && Score >= 75) { 
i return Grade.C7 

18 } 

19 else { 

20 return Grade.D; 

2 1 
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22 
23 
24 
5 
26 


给 出 了 函数 返 
【代码 5-25】 
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} 


let arg = 99; 


let msg = getGrade (arg); 


console.1log (msg); //0 


console.log (Grade [msg]); /AR 


在 代码 5-24 中 , 02~07 行 创 建 一 个 名 为 Grade 的 枚 举 , 它 里 面 的 枚 举 值 为 A,B,C,D。09~22 
行 定义 了 一 个 函数 getGrade， 它 接受 一 个 数值 类 型 的 参数 score， 并 返回 枚 举 类 型 Grade。 函 数 
体 中 会 根据 传 入 的 参数 score 范围 来 决定 返回 枚 举 Grade 的 什么 值 。24 行 调用 该 函数 ， 按 照 
getGrade 函数 的 定义 ， 应 该 是 返回 Grade.A〈 索 引 为 0) ， 因 此 25 行 输出 是 0， 要 想 输出 枚 举 
的 名 ， 可 以 使 用 Grade[0] 获 取 A， 如 26 行 所 示 。 

函数 不 仅 可 以 返回 简单 类 型 ， 还 可 以 返回 自 定义 类 型 ， 如 枚 举 或 元 组 类 型 等 。 代 码 5-25 


本 元 组 的 示例 。 


函数 返回 元 组 示例 代码 : ts025 ts 


// 返 回 学 生 信息 


function getStudentInfo(code: string) { 


. 


let table = []; 
For (let 1 = 0 dd < LO LT) 
table.push([]); 
let tupl: [string, string, number] = ["", "语文 "，0]; 
tupl[0] = "00" + i; 
tupl[1] = "语文 "; 
tupl[2] = parseFloat (((100 * Math.random()).toFixed(1))); 
table[i] = tupl; 
} 
console.log (table); 
let len = table.length; 
for (let i = 0; i < len; i++) { 
zf (table[lil[0] === code) { 
return table[il; 


. 


return null; 


let arg = getStudentInfo("002"); 
console.log (arg); Wk 


在 代码 5-25 中 , 定义 了 一 个 getStudentInfo 函数 来 模拟 获取 学 生 的 成 绩 信息 ， 在 函数 体内 


先 模拟 产生 了 10 条 成 绩 数据 ,由 于 学 生成 绩 信息 中 包含 学 生 的 学 号 、 课程 名 称 以 及 考试 成 绩 ， 
因此 这 个 记录 是 一 个 元 组 ， 结 构 为 [string, string, number]。 


在 代码 5-25 中 ，03 行 先 初始 化 一 个 空 数组 ， 然 后 利用 循环 创建 10 个 不 同 记录 的 元 组 追 
加 到 数组 table 中 。 此 处 用 到 了 Math.random() 函 数 ， 主 要 用 来 产生 随机 数 。 

TypeScript 是 有 元 组 概念 的 ， 但 是 当 生 成 JavaScript 时 ， 元 组 的 本 质 就 是 数组 ， 如 图 5.2 
所 示 。 


Array(19) 
*8: (3) ["000"，" 语 文 
>1: (3) ["ee1"，" 语 文 
2: 本 “ 主 文 < 
*3: (3) ["003"，" 语 文 
*4: (3) ["664"，" 语 文 " 
> 5: (3) ["ee5"，" 语 文 
*6: (3) ["ee6"，" 语 文 
p7: "语文 " 
*8: (3) ["068"，" 语 文 
"语文 " 


vArray(3) 
8: "0802" 
1 " 


图 5.2 代码 5-25 运行 结果 


| 元 组 是 按 引用 传 值 的 ， 因 此 循环 添加 值 的 时 候 注意 不 要 用 同一 个 tuple 对 象 ， 否 则 循环 后 
所 有 的 值 都 是 最 后 一 个 tuple 的 对 象 值 。 因 此 06 行 不 能 移 到 循环 体外 ， 否 则 生成 的 10 条 
| 记录 都 为 最 后 一 条 记录 。 


数组 也 是 按 引 用 传 值 的 , 当 将 一 个 数组 作为 函数 参数 的 时 候 , 在 函数 体内 修改 了 数组 的 值 ， 
那么 这 个 数组 本 身 的 值 也 被 修改 了 。 因 此 ， 即 使 没有 return 函数 也 可 以 修改 外 部 的 数据 。 代 码 
5-26 给 出 数组 作为 函数 参数 并 被 修改 的 示例 。 


【代码 5-26】 数组 作为 函数 参数 并 被 修改 示例 代码 : ts026.ts 


01 function change (args: number[]) { 


02 for (let i = 0; i < args.length; i++) { 
03 args[i] = i; 

04 } 

05 ’ 


06 let arr = [1, 2, 3, 4]7 
07 change (arr); 
08 console.log(arr); //[0, 1, 2, 3] 


在 代码 5-26 中 ，01~05 行 定义 了 一 个 函数 change， 它 接受 一 个 number 类 型 的 数组 ， 在 函 
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数 体内 通过 循环 修改 了 参数 的 值 。 此 函数 并 未 通过 return 返回 值 。06 行 用 [1, 2, 3, 4] 初 始 化 了 
一 个 变量 ar。07 行将 arr 作为 实 参 去 调用 函数 change。08 行 打印 arr 的 值 发 现 已 经 被 修改 了 。 
最 后 ， 函 数 也 可 以 返回 一 个 函数 。 本 质 上 函数 可 以 返回 任何 类 型 。 代 码 5-27 给 出 函数 返 


五 


另 一 个 函数 的 示例 。 


【代码 5-27】 函数 返回 另 一 个 函数 示例 代码 : ts027.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
2 
3 
14 


// 定 义 一 个 枚 举 
enum Funs{ 
SUM, 
MULTI 
. 
// 返 回 一 个 函数 
function getFunc(funs: Funs) { 
if (funs === Funs.SUM) { 
return function (score: number[]) { 
let sum = 0; 
for (let i of score) { 
sum += i; 
) 


return sum; 


else if (funs === Funs.MULTI) { 
return function (score: number[]) { 
let rest = 1; 
for (let i of score) { 
rest *= 1. 
} 


return rest; 


3 
else { 


throw new Error ("不 支持 此 参数 ") ; 


上 
let arg = Funs.SUM; 
let func = getFunc (arg); 


console.log (func([1, 2, 3, 4])); //10 
func = getFunc (Funs .MULTI); 
console.log(func([1, 2, 3, 4])); //24 


在 代码 5-27 中 ， 首 先 定 义 了 一 个 枚 举 Funs， 用 来 限定 可 以 使 用 的 函数 名 ， 这 里 有 两 个 枚 


举 项 : 
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SUM 和 MULTI。 定 义 了 一 个 getFunc 函数 ， 它 接受 一 个 类 型 为 枚 举 Funs 的 参数 ， 函 


数 体 根据 参数 会 返回 不 同 的 函数 。30~34 行 分 别 用 不 同 的 实 参 对 getFunc 进行 调用 ， 可 以 看 到 
会 返回 不 同 的 值 。 


5.1.4 ”参数 化 功能 

函数 中 可 以 有 参数 , 但 函数 中 的 参数 也 可 能 是 函数 ， 这 种 就 是 函数 的 参数 化 功能 。 参数 的 
参数 化 可 以 理解 为 一 种 代理 结构 , 在 定义 函数 类 型 的 参数 时 , 指定 的 函数 模式 实际 上 就 是 函数 
的 约定 , 可 以 视 为 一 种 接口 , 只 要 符合 这 个 接口 定义 的 , 不 管 外 部 具体 的 函数 怎么 定义 和 实现 ， 
都 可 以 被 函数 当 作 参 数 来 处 理 。 

事件 机 制 其 实 可 以 看 作 是 一 种 函数 的 参数 化 功能 在 实际 中 的 用 例 。 事 件 中 只 规定 了 函数 参 
数 的 具体 格式 ， 但 不 限制 其 实现 内 容 ， 因 此 大 大 提高 程序 的 扩展 性 和 通用 性 。 代 码 5-28 给 出 
函数 参数 化 的 示例 。 


【代码 5-28】 函数 参数 化 示例 代码 : ts028.ts 


01 let add = function (a: number, b: number) { 


02 returna+b; 

03 }; 

04 let multi = function (a: number, b: number) { 

05 Feturn a *x by 

06 }7 

07 function calc(fn: (a: number, b: number) => number, c: number,d:number) { 
08 return fnl(c,d); 

09 ¥ 

10 console.log(calc (add, 4,2)); //6 

11 console.log(calc (multi, 4, 2)); //8 


在 代码 5-28 中 ， 先 定义 了 两 个 函数 : 一 个 函数 add 返回 参数 的 和 ， 另 一 个 multi 函数 返回 
参数 的 乘积 ， 这 两 个 函数 当 作 参 数 使 用 。 另 外 ， 还 定义 了 一 个 calc 函数 ， 第 一 个 参数 fn 的 类 
型 是 (a: number, b: number) => number， 限 制 了 可 以 传 入 的 函数 格式 ， 只 能 是 两 个 number 类 型 
的 参数 ， 并 且 返 回 值 是 number。 

只 要 符合 这 个 定义 约定 ， 即 可 作为 calc 的 第 一 个 参数 进行 传 入 并 计算 。 从 10 和 11 行 可 
以 看 出 ，calc(add,4,2) 返 回 6，calc(multi, 4, 2) 返 回 8。 

另外 ， 也 可 以 直接 在 calc 函数 中 写 函 数 的 实现 逻辑 。 代 码 5-29 给 出 函数 参数 化 的 另 一 种 
写法 示例 。 

【代码 5-29】 函数 参数 化 的 另 一 种 写法 示例 代码 : ts029.ts 


01 function calc(fn: (a: number, b: number) => number,c: number,d:number) { 


02 return fnl(c,d); 

03 ’ 

04 let c = calc(function (a: number, b: number) { 
05 return a ** b; 
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06 1] 2. 3)7 
07 console.log(c); //8 


到 TypeScript 中 函数 参数 化 可 以 有 函数 签名 ， 这 样 可 以 让 代码 更 加 安全 。 | 


.2 函数 的 参数 


参数 是 调用 函数 时 向 其 传递 的 值 。 这 些 参数 可 以 直接 在 函数 中 使 用 ， 无 须 声 明和 初始 化 。 
函数 中 的 参数 可 以 没有 ， 也 可 以 是 一 个 或 者 多 个 ， 每 个 参数 使 用 逗号 分 隔 。 

在 TypeScript 中 ， 参 数 可 以 用 “参数 名 :数据 类 型 ”来 定义 一 个 函数 的 参数 ， 其 中 数据 类 
型 省 略 时 ， 默 认为 any 类 型 ， 可 以 传 入 任意 值 。 


二 虽然 参数 类 型 可 以 省 略 ， 但 是 不 建议 省 略 ，any 类 型 将 失去 静态 检测 的 功能 。 | 


一 般 来 说 , 如 果 TypeScript 里 的 函数 参数 用 数据 类 型 做 了 限制 , 那么 在 调用 函数 的 时 候 传 
递 的 实 参 值 就 不 像 JavaScript 那么 随意 了 。 实 参 必须 严格 按照 函数 定义 的 约定 ， 实 参 的 数据 类 
型 及 个 数 必须 和 形 参 的 数据 类 型 及 个 数 兼容 。 

编译 器 会 检查 用 户 是 否 为 每 个 参数 都 传 入 了 值 ， 且 数据 类 型 是 否 正确 。 换 句 话说 ， 若 传递 
给 一 个 函数 的 实 参 个 数 和 形 参 个 数 不 一 致 ， 则 编译 器 会 提示 错误 ; 若 参数 个 数 相同 ,但 是 有 一 
个 形 参 类 型 和 实 参 类 型 不 兼容 ， 则 编译 器 也 会 提示 错误 。 代 码 5-30 给 出 函数 调用 时 实 参 传递 
错误 的 示例 。 


【代码 5-30】 函数 调用 时 实 参 传递 错误 示例 代码 : ts030 .ts 


01 function func(a: string, b: string) { 


02 OCDr a 下 

03 } 

04 let resultl = func("Jack"); // 错误 ， 少 一 个 参数 

05 let result2 = func("Jack", "Adams", undefined); // 错 误 ， 多 一 个 参数 
06 let result3 = func("Jack", "Adams"); // 正 确 


07 let result4 = func("Jack", 2); // 错误 ， 第 二 个 参数 类 型 不 对 


在 代码 5-30 中 ，01~03 行 声 明了 一 个 名 为 func 的 函数 ， 它 接受 2 个 数据 类 型 为 string 的 
参数 ， 函 数 体 返回 参数 的 拼接 值 ， 返 回 类 型 推断 为 string 类 型 。 在 04 行 调用 func 的 时 候 只 传 
递 了 一 个 参数 ， 编 译 器 报错 。 在 05 行 调用 func 的 时 候 传递 了 3 个 参数 ， 多 了 一 个 参数 ， 编 译 
器 也 会 提示 错误 。 在 07 行 调用 func 的 时 候 传递 了 2 个 参数 , 个 数 是 符合 函数 声明 中 参数 定义 
个 数 的 ， 但 是 第 二 个 是 数值 2?， 而 形 参 需 要 的 是 字符 串 类 型 ， 因 此 类 型 不 符合 ,编译 器 也 会 提 
示 错 误 。 
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在 TypeScript 中 ， 函 数 参数 有 以 下 几 类 : 

@ 可 选 参数 

@ Rest 参数 (剩余 参数 ) 

@ 默认 参数 

下 面 将 分 别 对 这 几 类 函数 参数 进行 详细 介绍 。 


5.2.1 可 选 参数 

前 面 提 到 ， 函 数 参数 定义 了 几 个 ， 我 们 在 调用 的 时 候 就 要 传递 几 个 ， 且 类 型 还 必须 兼容 。 
有 些 情况 下 ,在 调用 函数 的 时 候 , 某 一 个 参数 某 些 情况 下 不 是 必需 的 ， 只 是 有 些 情况 下 才 需 要 
这 个 参数 ， 但 是 按照 前 面 的 说 法 ， 这 个 参数 只 要 在 函数 声明 的 时 候 定义 了 就 必须 传 入 。 

学 过 JavaScript 的 人 都 知道 ，JavaScript 中 函数 声明 时 的 形 参 和 调用 函数 时 的 实 参 并 不 强 
制 个 数 和 类 型 一 致 ， 那 么 在 TypeScript 函数 里 支 不 支持 可 选 的 参数 呢 ? 

由 于 TypeScript 是 兼容 JavaScript 的 ， 因 此 TypeScript 也 支持 声明 可 选 的 参数 。 可 选 参 
数 使 用 问号 标识 (? ) 来 定义 ， 参 数 一 旦 声明 为 可 选 的 ， 那么 在 函数 调用 的 时 候 既 可 以 传 值 也 
可 以 不 传 值 。 代 码 5-31 给 出 函数 可 选 参数 的 示例 。 

【代码 5-31】 函数 可 选 参数 示例 代码 : ts031.ts 


01 function func(a: string, b?: string) { 


02 if (b === undefined) { 

03 // 避 免 b = undefined 

04 Dm 交 

05 } 

06 Zetazn a + "I" + bh 

07 } 

08 let resultl = func("Jack"); // 正确 

09 let result2 = func("Jack", "Adams", undefined); // 错误 ， 多 一 个 参数 
10 let result3 = func("Jack", "Adams"); // 正确 

11 let result4 = func("Jack", 2); // 错误 ， 第 二 个 参数 类 型 不 对 


在 代码 5-31 中 ，01 行将 函数 func 中 第 二 个 参数 b 设置 为 可 选 参数 ， 格 式 为 b?:string。 这 
样 在 调用 func 的 时 候 ， 第 二 个 参数 既 可 以 不 传 值 也 可 以 传 值 。 例 如 ， 在 08 行 用 func("Jack") 
进行 调用 ， 虽 然 只 传 了 另 一 个 参数 值 ， 但 是 函数 正常 运行 。 

虽然 第 二 个 参数 是 可 选 参数 , 但 是 如 果 调 用 函数 时 传递 了 第 二 个 参数 值 , 那么 实 参 的 数据 
类 型 必须 和 形 参数 据 类 型 兼容 ， 否 则 报错 ， 如 11 行 ， 传 入 可 选 参数 值 为 2， 是 数值 型 的 ， 而 
形 参 需要 的 是 字符 型 ， 所 以 报错 。 另 外 ， 传 递 过 多 参数 仍然 不 允许 ， 如 09 行 传 入 3 个 参数 ， 
而 函数 func 只 定义 了 2 个 参数 ， 编 译 器 提示 错误 。 
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蕊 函数 的 参数 可 以 全 部 设 为 可 选 的 ， 但 可 选 的 必须 位 于 非 可 选 参数 之 后 ， 否 则 报错 。 | 


一 般 来 说 , 如 果 定 义 了 可 选 参 数 ， 那么 在 实际 被 外 部 调用 时 , 我 们 是 预先 不 知道 到 底 有 没 
有 传 值 的 。 如 果 不 显 性 传递 可 选 参数 ， 那 么 可 选 参数 默认 值 是 undefined。 为 了 函数 处 理 得 更 
加 稳健 ， 需 要 在 函数 体内 判断 一 下 可 选 参数 是 否 为 undefined， 以 便 有 区 别 地 进行 处 理 。 在 02 
行进 行 了 可 选 参数 b 的 判断 ， 如 果 是 undefined， 在 函数 调用 的 时 候 没有 传 入 可 选 参数 b 的 值 ， 
那么 可 以 将 其 设置 为 空 字符 串 ， 让 返回 值 更 具 可 读 性 。 


5.2.2 ”Rest 参数 〈 剩 余 参 数 ) 
如 果 函 数 的 参数 中 某 一 部 分 不 确定 , 既 可 能 是 一 个 参数 ,也 可 能 是 多 个 参数 ,这 时 就 不 太 


好 处 至 


了 。 前 面 虽 然 提 到 可 以 用 数组 来 解决 类 似 的 问题 ， 但 是 还 不 够 优雅 。 在 TypeScript 中 ， 


可 以 用 Rest 参数 来 解决 此 类 问题 。 
Rest 参数 〈 剩 余 参 数 ) 可 以 接受 函数 的 多 余 参 数 ， 组 成 一 个 数组 ， 但 必须 放 在 形 参 的 最 
后 面 。Rest 参数 名 前 用 ... 表 示 ， 形 式 如 下 : 


function 函数 名 (a: 类 型 ，b: 类 型 ，. ..restargs: 类 型 [] ) { 


} 


// 函数 逻辑 


其 中 ， 最 后 一 个 参数 ...restArgs 就 是 一 个 rest 参数 。 因 此 ， 参 数 restArgs 可 以 传 入 任意 数 
量 但 符合 参数 类 型 的 数据 。 虽 然 函数 中 有 一 个 arguments 内 置 对 象 ， 实 际 上 它 也 可 以 动态 解决 
参数 个 数 不 确定 的 问题 ， 但 是 相对 于 Rest 参数 而 言 ， 还 是 有 一 些 不 同 : 


Rest 参数 只 包括 那些 没有 给 出 名 称 的 参数 ，arguments 包含 所 有 参数 。 
arguments 对 象 本 质 上 不 是 数组 ， 而 Rest 参数 是 数组 。 

arguments 无 须 声 明 ， 是 内 置 对 象 ， 而 Rest 参数 是 需要 声明 的 。 

Rest 参数 必须 放 在 末尾 。 


剩余 参数 在 实际 调用 过 程 中 可 以 不 传 入 任何 参数 值 , 也 可 以 传递 多 个 参数 值 , 但 是 形 参 数 
据 类 型 必须 和 实 参数 据 类 型 兼容 。 代 码 5-32 给 出 函数 剩余 参数 的 示例 。 


【代码 5-32】 函数 剩余 参数 示例 代码 : ts032.ts 
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01 
02 
03 
04 
05 
06 
07 
08 


function func(a: string, ...b: string[]) 1{ 
if (b === undefined) { 
// 避 免 b = undefined 
poe= lly 
上 
Totorn a 区 区 上 
上 
let resultl = func("Jack"); // 正确 "Jack " 


09 let result2 = func("Jack", "Adams", undefined); /1/ 正确 "Jack 
Adams," 

10 let result3 = func("Jack", "Adams","Smith"); // 正确 , "Jack 
Adams, Smith" 

11 let result4 = func("Jack", 2); // 错误 ， 第 二 个 参数 类 型 不 对 


二 剩余 参数 的 类 型 必须 是 数组 类 型 的 ， 不 支持 其 他 类 型 。 | 


在 代码 5-32 中 ，01~06 行 定义 了 一 个 func 函数 ， 注 意 第 二 个 参数 b 声明 为 可 选 的 参数 ， 
此 类 型 是 string 数组 。08 行 只 传 入 了 第 一 个 参数 的 值 ， 第 二 个 参数 没有 传 入 值 ， 运 行 正常 。 
09 和 10 行 在 调用 函数 func 的 时 候 传 入 了 3 个 值 ， 运 行 也 正常 。11 行 传 入 了 2 个 参数 值 ， 但 
是 第 二 个 是 数值 2， 与 形 参 类 型 string 不 兼容 ， 编 译 器 报错 。 

剩余 参数 在 数值 求 和 等 方面 非常 方便 。 如 果 要 求 一些 数 值 的 和 , 那么 用 剩余 参数 将 非常 合 
适 。 下 面 定义 一 个 sum 函数 来 求 和 《〈 见 代码 5-33) ， 有 且 只 有 一 个 参数 ， 参 数 nums 以 … 为 
前 级， 表明 它 是 一 个 剩余 参数 ， 且 参数 类 型 为 数值 型 数组 。 


【代码 5-33】 sum 函数 剩余 参数 示例 代码 : ts033.ts 


01 function sum(...nums:number[]) { 


02 let i=0; 

03 let sum = 0; 

04 let len = nums.length; 

05 for(i = 0;i< len;i++) { 
06 sum = sum + nums[i]; 
07 } 

08 console.log (sum); 

09 } 

10 sum(1); WA 

11 Sum(1 2, 3)7 //6 

12 sum(1l, 2, 3, 4); //10 
3 sum(); //0 


在 代码 5-33 中 ，01~09 行 定义 了 一 个 名 为 sum 的 函数 ， 函 数 参数 为 一 个 剩余 参数 ， 且 类 
型 为 数值 数组 ，10 行 传 入 一 个 参数 1， 则 求 和 为 1; 11 行 和 12 行 分 别传 入 3 个 值 和 4 个 值 ， 
都 将 正确 地 打印 出 来 。13 行 没 有 传 入 任何 参数 值 ， 返 回 默认 值 0。 


5.2.3 ”默认 参数 


可 选 参数 有 一 个 不 足 之 处 ， 就 是 如 果 外 部 调用 的 时 候 没有 传递 值 ， 那 么 其 值 为 undefined。 
这 个 值 在 函数 体内 一 般 需 要 显 式 判 断 并 处 理 , 但 是 如 果 这 个 参数 有 一 个 默认 值 , 那么 在 函数 体 
内 就 可 以 省 略 一 些 预 处 理工 作 ， 让 代码 更 加 简洁 。 

在 TypeScript 中 ,我 们 可 以 为 函数 的 参数 设置 默认 值 。 这 样 在 调用 函数 的 时 候 ， 如 果 不 显 
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式 传 入 该 参数 的 值 ， 则 使 用 默认 参数 值 ; 如 果 显 式 传 入 值 ， 则 覆盖 参数 默认 值 。 函 数 的 参数 默 
认 值 是 在 参数 声明 后 用 等 号 (=) 来 设置 的 ， 语 法 格式 为 : 
function 函数 名 (a: 类 型 , . . .，b: 类 型 = 默认 值 ) { 


} 


// 函数 逻辑 


革 直 | 函数 参数 不 能 同时 设置 为 可 选 和 默认 。 | 


为 了 对 默认 参数 有 一 个 更 加 直观 认识 ， 代 码 5-34 给 出 一 个 使 用 参数 默认 值 的 函数 
getDiscount。 该 函数 有 两 个 参数 : 第 一 个 是 参数 price， 为 数值 类 型 ; 第 二 个 参数 是 rate， 设置 
了 默认 值 0.50， 是 默认 参数 。 


【代码 5-34】 函数 默认 参数 示例 代码 : ts034 .ts 


01 
02 
03 
04 
05 
06 


function getDiscount (price:number,rate:number = 0.50) { 
let discount = price * rate; 
return discount; 

, 

let a = getDiscount (1000); //500 

let b = getDiscount (1000, 0.6); //600 


在 代码 5-34 中 ， 当 调用 getDiscount 函数 时 ， 如 果 未 传 入 第 二 个 参数 ， 则 默认 参数 使 用 设 
置 的 默认 值 0.50; 如 果 传 入 rate 参数 的 实 参 值 ， 则 覆盖 默认 值 ， 而 改 用 传 入 的 值 。05 行 调用 
函数 未 提供 第 二 个 参数 的 值 ， 因 此 函数 返回 的 值 为 1000*0.50=500; 06 行 调用 的 时 候 显 式 地 传 
入 了 第 二 个 参数 的 值 0.6， 因 此 函数 返回 值 为 1000*0.6=600。 


5.2.4 ”参数 类 型 推断 


如 果 在 定义 函数 的 时 候 并 未 指定 参数 的 类 型 , 那么 此 时 编译 器 会 根据 上 下 文 来 自动 推断 参 
数 的 类 型 。 一 般 来 说 ， 如 果 未 指定 参数 类 型 ， 编 译 器 会 自动 推断 为 any 类 型 。 代 码 5-35 给 出 
参数 类 型 推断 的 示例 。 


【代码 5-35】 函数 参数 类 型 推断 示例 代码 : ts035.ts 


01 
02 
03 
04 
05 
06 


//xyy 推断 为 any 类 型 
let myAdd = function (x, y) { 
return Zz Tt ys 
1 
console.log (myAdd (2, 3)); /1/5 
console.1log (myAdd (2, "3")); WA 


在 代码 5-35 中 ， 用 函数 表达 式 定义 了 一 个 函数 ， 函 数 参数 x 和 y 都 没有 显 式 地 指定 参数 
类 型 , 则 此 时 编译 器 会 自动 推断 为 any 类 型 .05 行 和 06 行 分 别 用 不 同类 型 的 参数 来 调用 myAdd 
函数 ， 发 现 都 没有 报错 ， 都 能 正确 返回 结果 。 
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画 自动 推 电 类 型 为 any 的 情况 下 会 失去 静态 类 型 检测 。 | 


当 使 用 参数 默认 值 的 情况 下 ， 参 数 会 推断 为 默认 值 的 类 型 ， 如 y=0.5 默认 值 是 数值 类 型 ， 
那么 推断 为 y 为 数值 类 型 。 代 码 5-36 给 出 参数 默认 值 的 参数 类 型 推断 示例 。 
【代码 5-36】 默认 参数 类 型 推断 示例 代码 : ts036.ts 


01 ”//x 推 断 为 any 类 型 ，y 推断 为 number 
02 let myAdd = function (x, y= 0.5) { 


03 return x + y; 

04 } 

05 console.1log (myAdd (2, 3)); 2D 

06 console.1log (myAdd (2, "3")); // 错 误 


在 代码 5-36 中 ， 将 第 二 个 参数 赋 上 默认 值 0.5， 由 于 0.5 是 数值 类 型 的 ， 因 此 编译 器 将 自 
动 推断 y 参数 类 型 为 数值 型 。 此 时 ，05 行 传 入 两 个 数值 类 型 的 实 参 ， 可 以 正确 执行 并 返回 结 
果 。06 行 的 第 二 个 参数 为 字符 串 ， 不 兼容 数值 类 型 ， 因 此 编译 器 会 提示 报错 。 

如 果 在 赋值 语句 的 一 边 指定 了 类 型 但 是 另 一 边 没 有 指定 类 型 ,那么 TypeScript 编译 器 会 自 
动 识 别 出 类 型 。 代 码 5-37 给 出 函数 参数 类 型 推断 的 另 一 种 示例 。myAdd 声明 了 函数 的 类 型 ， 
当 定 义 一 个 匿名 函数 给 其 赋值 的 时 候 ，TypeScript 编译 器 会 用 myAdd 的 函数 定义 来 推断 匿名 
函数 的 参数 类 型 ， 即 x 和 y 都 是 数值 型 的 。 


【代码 5-37】 函数 参数 类 型 推断 示例 代码 : ts037.ts 


01 let myAdd: (baseValue: number, increment: number) => number; 
02 //x1y 推断 为 number 
03 myAdd = function (x, y) { 


04 return x + y; 

05 上 

06 console.1log (myAdd (2, 3)); //5 

07 console.1log (myAdd (2, "3")); // 参 数 类 型 错误 


在 代码 5-37 中 ，01 行 定义 了 一 个 变量 myAdd， 其 类 型 是 一 个 箭头 表达 式 ， 这 就 限制 了 此 
变量 只 能 赋值 和 此 声明 结构 一 致 的 表达 式 。03 行 定义 了 一 个 匿名 函数 ， 并 将 其 赋值 给 变量 
myAdd， 此 时 编译 器 就 会 根据 myAdd 的 类 型 定义 来 自动 推断 赋值 右边 匿名 函数 的 参数 类 型 ， 
即 x 和 y 都 为 number 类 型 。 


5.2.5 ”单个 参数 的 可 选 括号 


当 用 箭头 表达 式 来 定义 函数 时 ， 如 果 函 数 参数 有 且 只 有 一 个 ， 那 么 定义 函数 中 的 括号 0 是 
可 选 的 。 换 句 话 说， 括号 可 以 省 略 ， 让 代码 更 加 简洁 。 代 码 5-38 给 出 单个 参数 的 可 选 括号 示 
例 。 
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【代码 5-38】 单个 参数 的 可 选 括号 示例 代码 : ts038.ts 


01 let f=x =>x* 27 


02 console.1log(f(2)); //4 

此 函数 相当 于 : 

01 let f = function (x) { 

02 return x * 27 

03 }; 

04 console.log(f(2)) ; //4 


必 寺 省 略 了 括号 ， 则 无 法 声明 单个 参数 的 类 型 ， 默 认 是 any。 | 


如 果 要 限制 单个 参数 的 类 型 ， 那 么 必须 加 括号 。 代 码 5-39 给 出 单个 参数 限定 参数 类 型 的 
示例 。 


【代码 5-39】 单个 参数 限定 参数 类 型 示例 代码 : ts039.ts 


01 let f = (x:number) => x * 2; 
02 console.1log(f(2)); //4 


5.2.6 ”类 型 注解 


JavaScript 不 是 一 种 静态 类 型 语言 。 这 意味 着 我 们 不 能 指定 变量 和 函数 参数 的 类 型 。 但 是 ， 
TypeScript 是 一 种 静态 类 型 语言 ， 这 让 我 们 可 以 对 变量 和 函数 参数 进行 类 型 注解 〈Type 
Annotation) 。 类 型 注解 也 就 是 对 参数 或 变量 类 型 进行 注释 ， 比 如 限定 参数 为 数值 类 型 或 者 字 
符 类 型 等 。 

类 型 注解 用 于 强制 执行 类 型 检查 。TypeScript 中 不 一 定 要 使 用 类 型 注释 。 但 是 ， 类 型 注解 
有 助 于 编译 器 检查 类 型 ,并 有 助 于 避免 处 理 数据 类 型 时 报错 。 在 TypeScript 编程 中 ， 类 型 注解 
也 是 一 种 编写 代码 的 好 习惯 , 一 方面 开启 静态 类 型 检测 功能 , 将 很 多 潜在 的 类 型 错误 及 时 排查 
出 来 ， 另 一 方面 也 让 后 续 的 维护 更 加 容易 。 

可 以 用 冒号 (:) 在 函数 的 参数 名 后 面 指定 类 型 ， 冒 号 和 参数 名 之 间 可 以 有 一 个 空格 。 代 
码 5-40 给 出 参数 内 联 类 型 注解 的 示例 。 


【代码 5-40】 参数 内 联 类 型 注解 示例 代码 : ts040.ts 


01 Let stus 4 


02 id: string, 

03 age: number, 

04 name: string 

05 和 

06 function Print(student: { 
07 id: string; 

08 age: number, 
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09 name: String 

10 RN 

并 console.log("name:" + student .name) 7 
be } 

3 stu = 1 

14 TEA 

ER age: 31, 

16 name: "jack" 

Ey } 

18 print (stu); 

19 /iprint ({id: "001"}}); //error 


在 代码 5-40 中 ，01~05 行 声明 了 一 个 变量 stu， 它 用 内 联 类 型 注解 的 方式 注释 了 此 变量 的 
结构 信息 ， 即 3 个 属性 (分 别 是 id、age 和 name) 以 及 每 个 属性 的 类 型 。06 到 12 行 定义 了 一 
个 print 函数 ， 此 函数 的 一 个 形 参 student 也 用 内 联 类 型 注解 的 方式 注释 了 此 变量 的 结构 信息 
结构 和 stu 一 致 。13 行 用 对 象 字 面 量 对 stu 变量 进行 赋值 。18 行将 其 作为 参数 去 调用 print 函 
数 来 打印 参数 中 的 name 属性 。 从 19 行 可 以 看 出 ， 如 果 结 构 不 一 致 ， 则 会 报错 。 


与 .特殊 函数 


相对 于 函数 声明 而 言 ， 匿 名 函数 、 递 归 函 数 、 构 造 函 数 以 及 lambda 函数 称 为 特殊 函数 。 
这 些 函 数 虽 然 说 是 特殊 函数 ， 但 也 是 比较 常用 的 ， 因 此 非常 有 必要 进行 掌握 。 


5.3.1 匿名 函数 


顾名思义 ， 匿 名 函数 是 一 个 没有 函数 名 的 函数 ， 即 function 关键 字 后 直接 就 是 小 括号 。 匿 
名 函数 和 命名 函数 在 少数 地 方 存在 差异 。 匿名 函数 在 程序 运行 时 动态 声明 ， 一般 来 说 ,单独 定 
义 一 个 匿名 函数 是 没有 意义 的 〈 除 了 匿名 函数 自 调用 ) ， 因 为 定义 后 无 法 继续 调用 。 

因此 需要 将 匿名 函数 赋值 给 一 个 变量 ， 可 以 用 let 或 者 var。 这 个 变量 即 可 在 后 续 当 作 “ 函 
数 名 ”来 调用 。 可 以 将 匿名 函数 赋值 给 一 个 变量 ， 这 种 表达 式 就 称 为 函数 表达 式 。 匿 名 函数 的 
基本 语法 为 : 

function (参数 1: 类 型 ，. . . ,参数 n: 类 型 ) :类 型 { 

// 其 他 语句 
} 


! 匿名 函数 若 不 赋值 给 变量 ,那么 一 般 都 要 进行 自 调用 ,不 然 定 义 这 个 医 名 函数 将 失去 意义 ， 
[> 后 续 无 法 调用 。 
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匿名 函数 仅 在 调用 时 才 临 时 创建 函数 对 象 和 作用 域 链 对 象 。 调 用 完成 后 ,立即 释放 , 所 以 


匿名 函数 比 非 匿名 函数 更 节省 内 存 空间 。 
一 般 来 说 ， 匿 名 函数 的 使 用 场景 有 如 下 几 个 。 


1. 即刻 自 调用 
匿名 函数 自 调用 的 方法 是 在 函数 后 直接 使 用 () 进行 调用 .代码 5-41 给 出 匿名 函数 自 调用 


的 示例 。 


【代码 5-41】 匿名 函数 自 调用 示例 代码 : ts041.ts 


01 
02 
03 
04 


(function (msg:string) { 
let x = "Hello " + msg; 
console.log (x); 

}) ("world") ; //Hello world 


在 代码 5-41 中 定义 了 一 个 匿名 函数 ， 此 匿名 函数 有 一 个 string 类 型 的 参数 msg， 在 自 调 
用 的 时 候 需要 进行 参数 传 值 ， 这 里 传递 的 值 为 "world" 。 此 函数 在 运行 的 时 候 才 创建 函数 对 象 
和 作用 域 ， 执 行 完毕 后 就 销毁 了 。 因 此 ， 它 不 能 被 多 次 调用 。 

2. 回调 函数 

将 一 个 函数 callback 作为 另 一 个 函数 的 参数 时 ， 这 个 callback 叫 作 回调 函数 。 回 调 函 数 在 
JavaScript 中 是 非常 重要 的 特征 ， 如 事件 机 制 和 Ajax 访问 都 涉及 函数 回调 。 代 码 5-42 给 出 回 
调 函 数 的 示例 。 
【代码 5-42】 回调 函数 示例 代码 : ts042.ts 


01 
02 
03 
04 
05 
06 
07 
08 


function PostData(data: string,func : (res:string)=> void) { 
let rest = "get " + data + " result from post"; 
// 调 用 回调 函数 
func (rest); 
] 7 
let a = postData("hello", function (e) { 
console.log(e) 7 
]) 


在 代码 5-42 中 ，01~05 行 定义 了 一 个 postData 函数 ， 它 有 两 个 参数 : 第 一 个 参数 为 string 
类 型 data; 第 二 个 参数 为 一 个 箭头 函数 表达 式 ， 限 定 了 传 入 的 参数 类 型 是 一 个 函数 ， 它 有 一 个 
string 类 型 的 参数 并 且 返 回 类 型 为 void。06 行 调用 了 postData 函数 ， 第 二 个 实 参 直 接 传 入 匿名 
函数 的 定义 。 


3. 对 象 的 方法 
在 声明 对 象 的 时 候 ， 可 以 用 对 象 字面 量 来 声明 ， 其 中 对 象 方法 往往 用 匿名 函数 来 创建 。 代 
码 5-43 给 出 匿名 函数 创建 对 象 方法 的 示例 。 
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【代码 5-43】 匿名 函数 创建 对 象 方法 示例 代码 : ts043.ts 


01 let obj = { 


02 data: [1,2,3,4,5], 

03 add: function (...arg: number[]) { 
04 let sum = 0; 

05 for (let 1 of arg) { 
06 sum += i; 

07 } 

08 return sum; 

09 } 

10 } 

11 ”// 展 开 操 作 符 

时 2 let a = obj.add(...obj.data) 7 
13 console.1log(a) pal 


在 代码 5-43 中 ， 用 对 象 字面 量 创建 了 一 个 obj 对 象 ， 其 中 03 行 定义 了 add 方法 ， 是 用 匿 
名 函数 实现 的 ， 此 函数 的 参数 为 剩余 参数 ， 可 以 传 入 多 个 数值 类 型 的 值 。obj 对 象 中 定义 了 一 
个 值 为 [1,2,3,4,5] 的 属性 data，12 行 用 对 象 obj 调用 add 方法 ， 由 于 obj.data 是 数值 ， 不 是 逗号 
分 隔 的 值 ， 因 此 可 以 用 … 《展开 操 作 符 ) 来 将 数值 展开 成 逗号 分 隔 的 值 列表 。 


5.3.2 ”构造 函数 

构造 函数 是 一 种 特殊 的 方法 , 主要 用 来 在 创建 对 象 时 初始 化 对 象 , 即 为 对 象 成 员 变 量 赋 初 
始 值 。 构 造 函 数 总 与 new 操作 符 一 起 使 用 。TypeScript 也 支持 使 用 内 置 的 构造 函数 Function() 
来 定义 函数 ， 语 法 格式 如 下 : 

let res = new Function ("参数 1", "参数 2",..., "参数 n", "函数 体 ") 

Function() 构 造 函 数 允许 运行 时 代码 动态 地 创建 和 编译 。 在 这 个 方式 上 ， 它 类 似 于 全 局 函 
数 eval()。Function() 构 造 函 数 每 次 执行 时 都 解析 函数 主体 ， 并 创建 一 个 新 的 函数 对 象 。 所 以 ， 
在 一 个 循环 或 者 频繁 执行 的 函数 中 调用 Function() 构 造 函 数 的 效率 是 非常 低 的。 代码 5-44 给 出 
Function 构造 函数 创建 函数 的 示例 。 

【代码 5-44】 Function 构造 函数 创建 函数 示例 代码 : ts044.ts 


01 let myFunction = new Function("x", "y", "return x * y"); 
02 let x = myFunction(4, 3); 
03 console.1og (x); Wal 


革 下 | new Function 这 种 方式 一 般 不 建议 使 用 。 | 


值得 注意 的 是 ， 返 回 值 为 void 的 函数 。 在 函数 声明 时 ,默认 会 生成 一 个 同名 的 构造 函数 ， 
可 以 用 new 函数 名 来 调用 。 代 码 5-45 给 出 构造 函数 调用 的 示例 。 
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【代码 5-45】 构造 函数 调用 示例 代码 : ts045.ts 


01 function Add(x: number, y: number) { 


02 console.log(x + y); 

03 } 

04 let a = new Add(2, 3); 

05 console.1o0g(a); A/5 


必 寺 | 只 有 返回 值 为 void 的 函数 才能 用 new 进行 调用 。 | 


构造 函数 不 能 返回 非 空 的 值 , 为 了 区 分 哪些 函数 可 以 调用 构造 函数 、 哪些 函数 不 可 以 调用 
构造 函数 , 约定 的 命名 规则 是 不 同 的 ,可 以 用 构造 函数 调用 的 函数 首 字母 大 写 , 不 能 用 构造 函 
数 调用 的 首 字母 小 写 。 


5.3.3 ”递归 函数 


程序 调用 自身 的 过 程 称 为 递归 (recursion) 。 递 归 作 为 一 种 算法 在 程序 设计 语言 中 广泛 应 
用 。 有 些 现实 问题 如 果 不 借助 递归 ， 那 么 可 能 是 无 法 求解 的 。 

递归 往往 只 需 少量 的 代码 就 可 以 描述 出 解 题 过 程 所 需要 的 多 次 重复 计算 ,大 大 地 减少 了 程 
序 的 代码 量 。 递 归 的 能 力 在 于 用 有 限 的 语句 来 定义 对 象 的 无 限 集合 。 

一 般 来 说 ， 递 归 需 要 有 退出 条 件 、 递 归 前 进 段 和 递归 返回 段 。 当 退出 条 件 不 满足 时 ， 递 归 
前 进 ; 当 退出 条 件 满足 时 ， 递 归 返 回 。 

递归 函数 在 函数 内 调用 函数 本 身 。 举 个 例子 : 斐 波 那 契 数列 的 排列 是 1，1，2，3，5，8&， 
13，21，34，55，89，144…… 以 此 类 推 下 去 ， 我 们 会 发 现 ， 它 后 一 个 数 等 于 前 面 两 个 数 的 和 。 
在 这 个 数列 中 的 数字 就 被 称 为 斐 波 那 契 数 。 

如 果 想 求解 斐 波 那 契 数 ,那么 必须 借助 递归 函数 来 求解 .首先 分 析 数 列 的 递归 表达 式 如 下 ; 


n nl 
fy =f) A 
此 函数 的 解析 式 是 一 个 分 段 函数 ， 其 中 第 二 段 可 以 看 到 是 一 个 递归 函数 ， 自 身 调用 自身 。 
代码 5-46 给 出 递归 函数 求解 斐 波 那 契 数 的 示例 。 
【代码 5-46】 递归 函数 求解 斐 波 那 契 数 示例 代码 : ts046 .ts 


01 function F(n:number){ 


02 f(D <= LY 

03 return n; 

04 } 

05 Lee { 

06 return F(n-1)+F(n-2); 
07 } 

08 } 
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09 let a= F(10); 

10 console.log(a); vss 

代码 5-46 就 是 将 斐 波 那 契 数 的 解析 式 翻译 成 TypeScript 代 码 . 图 $.3 给 出 斐 波 那 契 数 F(6) 
的 计算 过 程 示意 图 。 


图 53 斐 波 那 契 数 F(6) 的 计算 过 程 示意 图 
另外 ， 数 学 上 的 阶乘 也 是 递归 的 典型 示例 。 其 解析 式 为 : 


1 n=0 
人 n>0 
我 们 可 以 用 箭头 函数 来 递归 求解 阶乘 。 代 码 5-47 给 出 递归 函数 求解 阶乘 的 示例 。 
【代码 5-47】 递归 函数 求解 阶乘 示例 代码 : ts047.ts 


01 Var fact = (x) => (x == 02?1 :xx* fact(x - 1)); 
02 let n = fact(5); 
03 console.1log(n); AIT20 


图 5.4 给 出 阶乘 fact(5) 的 计算 过 程 示意 图 。 
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fact(5) 
5x4x3x2x1x1 S*fact(4) 
L 4x*fact(3 
| tS) 
3*fact(2) 
3*2*1*1 
2xfact(1) 
| 2x1#1 Li 1*fact(0) | 
| 1x*1 上 和 


图 5.4 阶乘 fact(5) 的 计算 过 程 示意 图 


5.3.4 lambda 函数 

lambda 表达 式 基 于 数学 中 的 入 演算 得 名 ， 是 没有 函数 名 的 函数 。lambda 函数 是 用 箭头 符 
号 (=>) 声明 的 ， 因 此 Lambda 函数 也 称 为 箭头 函数 。 箭 头 函数 表达 式 的 语法 比 函数 表达 式 
更 短 ， 基 本 语法 为 : 

(参数 1 :类 型 ， 参 数 2: 类 型 ,…, 参数 n :类 型 ) => {函数 逻辑 语句 } ; 

函数 只 有 一 行 语句 时 ， 大 括号 可 以 省 略 (return 也 可 以 省 略 ) 。 代 码 5-48 给 出 lambda 函 
数 示例 ， 该 函数 返回 两 个 数 的 和 。 
【代码 5-48】 lambda 函数 求 和 示例 代码 : ts048.ts 


01 let sum = (x: number, y: number) => x + Y7 
02 let ret = sum(2, 3); 
03 console.log (ret); 


如 果 lambda 函数 有 多 条 语句 ， 那 么 大 括号 不 能 省 略 ， 如 代码 5-49 所 示 。 
【代码 5-49】 lambda 函数 求 和 多 条 语句 示例 代码 : ts049.ts 


01 let sum = (x: number, y: number) => { 


02 let ret =x+y; 
03 return ret; 
04 } 


05 let ret = sum(2, 3); 
06 console.log (ret); 


如 果 参 数 就 一 个 (单个 参数 ) 且 没有 给 出 参数 类 型 ， 那 么 函数 声明 中 的 () 是 可 选 的 ， 如 
代码 5-50 所 示 。 
【代码 5-50】 lambda 函数 单个 参数 示例 代码 : ts050.ts 


01 let display = x => { 
02 console.1og ("输出 为 "+x); 
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03 于 


第 5 章 函 数 


04 display(12); // 输 出 为 12 
无 参数 时 必须 设置 空 括号 ， 不 能 省 略 ， 如 代码 5-51 所 示 。 
【代码 5-51】 lambda 函数 无 参数 示例 代码 : ts051.ts 


01 let display = () => { 


02 
03 } 


console.1o0g ("函数 被 调用 ") ， 


04 display(); // 函 数 被 调用 


当 返 回 


字面 量 上 加 - 


值 是 对 象 字面 量 时 , 为 了 避免 函数 体 的 大 括号 与 对 象 字面 量 的 大 括号 冲突 , 必须 在 
-对 小 括号 ， 如 代码 5-52 所 示 。 


【代码 5-52】 lambda 函数 返回 值 是 对 象 字面 量 示 例 代码 : ts052.ts 


01 let func = params => ( 


02 
03 
04 
05 
06 ) 


‘ 
name: "jack", 


data : params 


2 


07 console.log (func ("wang")); 


箭头 函数 没有 绑 定 this 变量 ， 默 认 指 向 定义 它 时 父 对 象 的 this 对 象 。 代 码 5-53 给 出 一 个 
相对 复杂 的 函数 示例 。 


【代码 5-53】 lambda 函数 this 示例 代码 : ts053.ts 


01 function func() { 


02 
03 
04 
05 
06 
07 
08 
09 
10 
和 
12 
13 
14 
1 
16 
全 这 


//"use strict"; 
console.log (this); 
let array = [3, 4, 5]; // 局 部 变量 
this.array = [2, 3, 4]; 
let calculator = { 
array: [1, 2, 3], 
sum; () => { 
console.1log (this); // 父 级 this 指向 
return this.array.reduce((result, item) => result + item); 
}, 
sum2: function () { 
console.log (this); 
return this.array.reduce((result, item) => result + item); 


ji 
console.log(calculator.sum()); 
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18 console.log(calculator.sum2()); 
19 } 

20 ”// 构 造 函 数 调用 

| //new func(); 

22 ”// 独 立 调用 

23 func(); 


在 代码 5-53 中 ， 并 未 在 window 对 象 下 直接 定义 函数 ， 而 是 先 用 函数 func 创建 了 一 个 独 
立 的 作用 域 。 在 函数 func 中 , 定义 了 一 个 calculator 对 象 ， 用 对 象 字 面 量 方式 创建 了 一 个 sum 
和 sum2 方法 。sum 是 用 箭头 函数 构建 的 ， 而 sum2 是 用 匿名 函数 构建 的 。17 行 和 18 行 分 别 
对 calculator 对 象 的 sum 和 sum2 方法 进行 了 调用 。 

23 行 用 独立 函数 调用 的 方式 (func(O) 进行 调用 。 此 时 ， 默 认 情况 下 是 非 严 格 模式 ， 所 以 
func 内 的 this 为 window 对 象 。05 行 的 this.array = [2, 3, 4] 相 当 于 window.array = [2, 3, 4]。09 
行 箭头 函数 中 的 this 指向 父 对 象 运行 时 的 this 指向 , 也 就 是 window, 因此 17 行 输出 结果 为 9。 
13 行 的 this 指向 调用 它 的 对 象 ， 即 calculator 自身 ， 因 此 第 14 行 的 this.array 值 为 [1, 2, 3]，18 
行 则 输出 6。 

如 果 将 02 行 注释 去 掉 ， 则 为 严格 模式 ， 此 时 func 里 面 的 this 为 undefined， 则 在 运行 05 
行 的 时 候 就 会 报 TypeError 错误 。 

如 果 用 构造 函数 调用 new func(), 则 不 管 函 数 func 是 严格 模式 还 是 非 严 格 模式 , func 里 面 
的 this 均 指 向 func 对 象 本 身 ， 因 此 09 行 箭头 函数 中 的 this 指向 父 对 象 的 this， 也 就 是 func 对 
象 ，17 行 输出 结果 为 9， 为 [2, 3, 4] 数 值 的 和 。13 行 仍然 指向 calculator 自身 。 因 此 ， 第 14 行 
的 this.array 值 为 [1, 2, 3]，18 行 输出 6。 

箭头 函数 也 没有 绑 定 arguments 变量 ， 因 此 在 箭头 函数 里 面 不 能 使 用 内 置 的 arguments 对 
象 。 代 码 5-54 给 出 lambda 函数 中 使 用 arguments 的 错误 示例 。 

【代码 5-54】 lambda 函数 中 使 用 arguments 示例 代码 : ts054.ts 


01 Var arr = () => arguments[0]; 
02 arr(); //arguments 不 可 用 


箭头 函数 虽然 从 语法 本 身上 看 是 可 以 作为 构造 函数 调用 的 ， 但 是 由 于 其 内 部 没有 绑 定 
this， 因 此 不 能 为 函数 中 的 属性 初始 化 值 。 代 码 5-55 给 出 lambda 函数 用 作 构 造 函 数 的 示例 。 


【代码 5-55】 lambda 函数 用 作 构 造 函 数 的 示例 代码 : ts055.ts 


01 let Func = (name: string, age: number) => { 


02 this.name = name; 
03 this.age = age; 
04 } 


05 let a = new Func("jack", 31); 
06 console.log (window); 


在 代码 5-55 中 ，01~04 行 定义 了 一 个 函数 Func， 它 具有 两 个 参数 ，02~03 行 分 别 将 这 两 


个 参数 赋值 给 了 this 对 象 中 的 name 和 age 属性 。05 行 用 构造 函数 进行 调用 ， 你 会 发 现 函数 体 
内 的 this 实际 上 指向 window， 也 就 是 污染 了 全 局 环境 。 

箭头 函数 可 以 用 prototype 扩展 属性 。 代 码 5-56 给 出 lambda 函数 用 prototype 扩展 属性 的 
示例 。 


【代码 5-56】 lambda 函数 用 prototype 扩展 示例 代码 : ts056.ts 


01 let func= () =>1{ 

02 console.log("call"); 

03 | 

04 func.prototype.name = "jack"; 
05 let a = new func(); 


06 console.log(a.name); 


lambda 函数 的 主要 用 途 是 作为 参数 传 入 ， 这 种 语法 比较 简洁 和 高 效 。 特 别 适 合 在 定时 器 
函数 中 使 用 。 代 码 5-57 给 出 lambda 函数 用 作 定 时 器 参数 的 示例 。 


【代码 5-57】 lambda 函数 用 作 定 时 器 参数 示例 代码 : ts057.ts 


01 let timer = setTimeout(() => { 

02 console.1log (this); //window 
03 console.1og ('1 秒 后 执行 ') ; 

04 }, 1000); 


5.3.5 ” 范 数 重 载 


函数 重 载 常用 来 实现 功能 类 似 但 所 处 理 的 数据 类 型 不 同 的 问题 。 函 数 重 载 是 函数 名 字 相 
同 ， 而 参数 不 同 ， 返 回 类 型 可 以 相同 也 可 以 不 同 ， 但 不 能 只 有 函数 返回 值 类 型 不 同 。 这 些 同 名 
函数 的 形 参 要 人 么 个 数 不 同 ， 要 么 类 型 不 同 ， 要 么 顺序 不 同 。 

每 个 函数 重 载 都 必须 有 一 个 独一无二 的 参数 类 型 列表 。 函 数 重 载 是 多 态 的 一 种 实现 方式 。 
JavaScript 本 身 不 支持 重 载 ， 在 TypeScript 中 可 以 使 用 “变通 ”的 方式 来 支持 重 载 : 先 声 明 所 
有 函数 重 载 的 定义 ， 不 包含 方法 的 实现 ; 再 声明 一 个 参数 为 any 类 型 的 重 载 函数 并 实现 。 函 数 
体内 要 通过 参数 类 型 不 同 来 实现 不 同 的 操作 。 

重 载 函数 一 般 有 以 下 几 种 方式 。 

1. 参数 类 型 不 同 

例如 ， 有 两 个 同名 的 函数 disp， 它 们 的 参数 都 只 有 一 个 ， 其 中 一 个 参数 类 型 为 string， 另 
一 个 参数 类 型 为 number。 代 码 5-58 给 出 函数 重 载 的 示例 。 


【代码 5-58】 函数 重 载 示 例 代 码 : ts058.ts 
01 //1 声明 定义 


02 function disp(x: string); 
03 function disp(x: number); 
04 ”//2 实 现 
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05 function disp(x: any) { 


06 if (typeof x === "string") { 

07 console.log("string="+x); 

08 } 

09 else if (typeof x === "number") { 
10 console.1og("number="+X) 7 

El } 

2 else { 

EE console.1og ("未 实现 ") 

14 } 

LS 


16 disp(2); 
17 disp("2"); 


副 函数 重 床 声明 定义 必须 放 在 实现 函数 之 前 ， 否 则 报错 。 | 


2. 参数 数量 不 同 

例如 ， 有 两 个 同名 的 函数 disp， 它 们 的 参数 都 是 number 类 型 的 ， 但 一 个 函数 的 参数 是 一 
个 ， 而 另 一 个 是 两 个 。 代 码 5-59 给 出 参数 数量 不 同 的 函数 重 载 的 示例 。 
【代码 5-59】 参数 数量 不 同 的 函数 重 载 示例 代码 : ts059.ts 

01 ”//1 声明 定义 


02 function disp(x:number); 
03 function disp(x:number,y:number); 


04 ”//2 实 现 

05 function disp(x: any,y?:any) { 
06 if (y === undefined) { 

07 console.1log (x); 

08 T 

09 else { 

10 console.log (x+y); 

和 } 

12 时 


LE disp(2); 
14 disp(2,3); 


| 函数 重 载 中 如 果 是 参数 个 数 不 同 ,那么 函数 实现 中 对 应 的 参数 必须 为 可 选 参数 ,否则 报错 。 


在 代码 5-59 中 ，02 行 函数 有 一 个 参数 ，03 行 函数 有 两 个 参数 ， 那 么 在 使 用 这 个 重 载 函 
数 时 可 能 传 入 一 个 参数 ， 也 可 能 传 入 两 个 参数 ， 因 此 第 二 个 参数 必须 设置 为 可 选 参数 。 
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3. 参数 类 型 顺序 不 同 

除了 上 面 的 函数 重 载 方式 之 外 ， 还 可 以 是 参数 类 型 顺序 不 同 的 函数 重 载 。 代 码 5-60 给 出 
参数 类 型 顺序 不 同 的 函数 重 载 的 示例 。 

【代码 5-60】 参数 类 型 顺序 不 同 的 函数 重 载 示例 代码 : ts060.ts 


01 
02 
03 
04 
05 
06 


15 
16 


//1 声明 定义 
function disp(x: number, y: string); 
function disp(x: string, y: number); 
//2 实 现 
function disp(x: any, y: any) { 
if (typeof x === "number" && typeof y === "string") { 
console.log(x*10 + y); 
上 
else if (typeof y === "number" && typeof x === "String") { 
console.log(x + y*10); 
3 
else { 
console.1og ("未 实现 ") ; 


} 
disp("2", 3); //"230" 
disp(2, "3"); OS 


4. 参数 默认 值 不 同 
函数 重 载 还 有 一 种 形式 ， 即 参数 默认 值 不 同 ， 虽 然 参数 个 数 和 类 型 以 及 顺序 都 是 一 样 的 ， 
但 是 就 是 参数 的 默认 值 不 同 。 代 码 5-61 给 出 参数 默认 值 不 同 的 函数 重 载 的 示例 。 


【代码 5-61】 参数 默认 值 不 同 的 函数 重 载 示例 代码 : ts061.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
13 
14 


//1 声明 定义 
function disp(x:"Jack",y:number); 
function disp(x:"Smith", y: number); 


//2 实现 
function disp(x: any, y: any) { 
if ( x === "Jack") { 


console.log("Jack = "+y); 
} 
else if (x === "Smith") { 
console.log("Smith = "+y); 
由 
else { 
console.1og ("未 实现 ") ; 
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ls 
16 
17 


daispl Uack LS 
disp("smith", 6); 


在 参数 默认 值 重 载 函数 中 ， 除 了 默认 值 外 不 允许 传 入 其 他 值 。 代 码 5-61 中 的 第 一 个 参数 
只 能 是 Jack 或 者 Smith ， 不 能 是 其 他 字符 串 。 


从 以 上 几 个 示例 可 以 看 出 ，TypeScript 函数 重 载 相对 于 C# 滞 言 而 言 并 非 是 严格 意义 上 的 


重 载 ， 只 是 利用 了 重 载 的 思想 。 


,4 函数 与 数组 


函数 和 数组 都 是 比较 常用 的 类 型 ,函数 一 般 用 于 定义 动作 或 行为 , 而 数组 一 般 用 于 多 个 值 
的 存储 。 函数 是 动 , 数组 是 静 ， 函数 可 以 传 入 数组 , 也 可 以 返回 数组 ; 而 数组 也 可 以 存储 函数 。 
可 谓 静 中 有 动 ， 动 中 有 静 。 


5.4.1 


将 数组 传递 给 函数 


数组 可 以 作为 参数 传 入 函数 , 相 比 于 其 他 简单 类 型 的 参数 , 数组 传 参 可 以 将 多 个 元 素 当 作 
一 个 整体 进行 操作 。 代 码 5-62 给 出 数组 作为 函数 参数 的 示例 。 


【代码 5-62】 数组 作为 函数 参数 示例 代码 : ts062.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


function sum(args: number[]) { 
let sum = 0; 
for (let i of args) { 
sum += i; 
} 
return sum; 


Let a = Son{lly 2 3) //6 
let b = sum([1, 2, 3, 4]); //10 
let c= sum([1]); yy 


在 代码 5-62 中 ， 首 先 定义 了 一 个 sum 函数 ， 它 有 一 个 参数 arg， 其 数据 类 型 为 number[]， 
即 是 一 个 数值 数组 。 函 数 体 主要 利用 循环 对 参数 arg 中 的 元 素 进行 求 和 ， 并 返回 。08 到 10 行 
用 数组 实 参 调用 函数 sum， 可 以 看 到 不 同 长 度 的 数组 都 可 以 正确 地 求 和 。 


一 数组 是 引用 类 型 , 因此 要 特别 小 心 , 在 函数 体内 修改 数组 参数 的 值 会 直接 改变 外 部 数组 的 
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5.4.2 ”从 函数 返回 数组 
一 般 来 说 , 函数 都 具有 返回 值 , 但 是 函数 的 返回 值 只 能 是 一 个 对 象 , 如 果 要 想 从 函数 中 返 


加 多 个 元 素 ， 可 以 将 其 封装 到 数组 中 ， 从 而 作为 一 个 整体 对 象 进行 返回 。 代 码 5-63 给 出 数组 


作为 函数 返回 值 的 示例 。 
【代码 5-63】 数组 作为 函数 返回 值 示例 代码 : ts063.ts 


01 
02 
03 


function fnMultiTwo (args: number[]) :number[] { 
let ratio = 27 
let ret: number[] = []; 
for (let i of args) { 
ret.push(i * ratio); 
} 
return ret; 


下 


let a = fnMultiTwo ([1, 2, 3]); /ll2r 4 61 
let b = fnMultiTwo ([1l, 2, 3, 4]); Wi2r ar 678] 
let c = fnMultiTwo ([1]); 人 


5.5 小 结 


本 章 重 点 对 函数 的 相关 内 容 进行 了 详细 介绍 ,函数 作为 TypeScript 中 非常 重要 的 一 个 知识 
点 ， 必 须 认 真 掌握 。 函 数 可 以 用 函数 声明 、 函 数 表达 式 和 箭头 表达 式 等 方式 进行 函数 定义 ， 它 
们 之 间 既 有 共同 点 也 有 不 同 点 ， 要 注意 区 分 this 的 具体 指 代 对 象 。 这 是 函数 的 难点 ， 虽 然 有 基 
本 的 判断 规则 ， 但 是 最 靠 谱 的 还 是 输出 this 来 查看 当前 的 具体 指 代 对 象 。 

函数 的 参数 分 为 可 选 参数 、 剩 余 参 数 和 默认 参数 几 种 , 这些 不 同类 型 的 参数 可 以 更 好 地 让 
我 们 编写 出 更 加 安全 和 优雅 的 函数 代码 。 函 数 的 参数 可 以 是 任何 类 型 ,函数 也 可 以 作为 另 一 个 
函数 的 参数 。 

另外 , 函数 中 还 有 一 些 相 对 于 普通 函数 而 言 的 特殊 函数 ,如 匿名 函数 、 递 归 函 数 和 lambda 
函数 ， 这些 函数 适用 于 特别 的 场景 下 ， 可 以 让 代码 更 加 简洁 。 其 中 , 递归 函数 可 以 解决 很 多 比 
较 复杂 的 问题 。 

最 后 ， 函 数 的 参数 可 以 是 数组 , 同时 也 可 以 返回 数组 。 函数 和 数组 的 良好 配合 可 以 打破 函 
数 参数 个 数 的 限制 以 及 函数 一 般 只 能 返回 单个 值 的 局 限 。 
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古语 云 ， 巧 妇 难为 无 米 之 炊 ， 工 欲 善 其 事 必 先 利 其 器 。 这 些 都 直接 说 明了 工具 对 一 件 事情 
的 重要 性 。 我 们 学 习 TypeScript 语言 也 是 一 样 的 ， 虽 然 可 以 用 记事 本 来 编写 TypeScript 代码 ， 
但 是 当代 码 比较 复杂 时 , 若 没有 一 些 编辑 器 等 工具 的 辅助 , 则 会 让 我 们 编码 的 效率 和 质量 都 大 


大 降低 。 


因此 , 针对 TypeScript 语言 ， 找 到 几 款 合适 的 工具 , 来 辅助 我 们 日 常 的 开发 , 将 大 有 神 益 。 
开发 工具 建议 选择 开源 免费 的 Visual Studio Code， 它 对 TypeScript 的 支持 度 非 常 完善 ， 个 人 
感觉 在 Web 前 端 开发 方面 比 Visual Studio 还 要 好 。 

另外 ，Visual Studio Code 大 量 的 插件 (如 ESLint) 可 以 对 编写 的 代码 进行 自 定 义 语法 规 
则 检查 ， 可 以 让 我 们 的 代码 更 规范 。 本 章 重点 对 几 个 Visual Studio Code 插件 工具 进行 介绍 。 

本 章 主要 涉及 的 知识 点 有 : 


Visual Studio Code 工具 : 学 会 如 何 用 Visual Studio Code 进行 TypeScript 项 目的 开发 
以 及 调试 。 

ESLint 工具 : 学 会 在 Visual Studio Code 中 集成 ESLint 工具 ， 并 让 其 对 代码 规范 进行 
检查 。 

TSLint 工具 : TSLint 工具 和 ESLint 工具 有 点 类 似 ， 但 是 更 针对 TypeScript 的 特点 ， 
可 以 更 有 针对 性 地 对 我 们 的 代码 进行 规范 检查 。 

Jest 工具 : 学 会 在 Visual Studio Code 中 集成 Jest 测试 工具 ， 并 让 其 对 代码 进行 测试 。 
webpack 工具 : 学 会 在 Visual Studio Code 中 集成 webpack 工具 ， 并 学 习 如 何 用 
webpack 工具 对 我 们 的 项 目 代码 进行 打包 。 


画 Visual Studio Code 对 TypeScript 的 多 文件 项 目 管理 和 开发 来 说 非常 有 好 处 。 


第 6 章 项 目 必 备 工具 


@.1 使 用 Visual Studio code 


最 近 几 年 ， 微 软 的 Visual Studio Code 开发 工具 异常 火爆 。Visual Studio Code 是 一 个 
轻 量 级 且 开 源 的 、 非 常 适合 编写 现代 Web 应 用 的 一 款 跨 平台 编辑 器 ， 能 运行 在 Windows、 
Mac OS 和 Linux 之 上 。 这 标志 着 Microsoft 第 一 次 向 开发 者 们 提供 了 一 款 真 正 的 跨 平 台 编 
辑 器 。 

Visual Studio Code 是 很 多 前 端 开 发 人 员 的 一 款 首选 Web 开发 工具 。 它 支持 自 定义 编辑 器 ， 
可 以 让 开发 人 员 更 改 布局 、 图 标 、 字 体 和 配色 方案 ， 可 以 打造 非常 个 性 的 主题 。 

Visual Studio Code 支持 很 多 种 语言 的 开发 ， 如 C#、Java、JavaScript、HTML、CSS、 
TypeScript、Ruby、Objective-C、PHP、JSON、Less、Sass 和 Markdown 等 。 

Visual Studio Code 支持 语法 自动 高 亮 和 括号 匹配 ， 同 时 可 以 对 代码 进行 折合 和 导航 。 
Visual Studio Code 已 经 成 为 HTML、Nodejs、JavaScript 和 TypeScript 开发 的 首选 IDE。 另 外 ， 
可 以 通过 插件 扩展 来 增强 编辑 器 的 功能 。 

Visual Studio Code 主要 具有 以 下 主要 功能 : 


1. 代码 智能 感知 

对 于 一 款 编程 开发 工具 而 言 , 代码 的 智能 提示 和 自动 补 全 等 功能 必 不 可 少 。 由 于 很 多 编程 
语言 本 身 的 语法 和 内 置 API 比较 多 ， 不 可 能 一 一 记 住 。 此 时 代码 提示 就 非常 重要 了 ， 开 发 人 
员 只 要 输入 几 个 关键 单词 ，Visual Studio Code 就 可 以 根据 当前 语言 的 相关 配置 来 自动 进行 代 
码 提示 。 另 外 ， 可 以 很 方便 地 对 代码 进行 导航 ， 跳 转 到 定义 ， 如 图 6.1 所 示 。 


© indexhtml © nn 


1 <lDOCTYPE html> 

2 xhtml lang="en"> 

3 <head> 

4 <meta charset="UTF-8"> 

5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

7 <title>Document</title> 

8 <script> 

9 | document.gete 

10 </script> @ getElementById (method) Document.getElementById..O 
11 </head> © getElementsByClassName 

12 <body> © getElementsByName 

13 TD getElementsByTagName 

14 </body> 全 getElementsByTagNameNS 

15 -</html> © getselection 


DD getRootNode 


图 6.1 Visual Studio Code 代码 智能 提示 界面 


2. 调试 

调试 对 于 任何 一 个 开发 人 员 来 说 都 是 非常 重要 的 。 我 们 编写 的 代码 , 虽然 可 以 通过 单元 测 
试 等 方法 进行 发 布 前 测试 ， 但 是 一 旦 发 现 程序 运行 异常 ， 单 靠 人 工 查看 代码 来 排查 Bug 是 非 
常 难 的 ， 必 须 借助 工具 进行 逐步 调试 。 
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因此 ， 编 辑 器 的 调试 是 必 备 功能 。Visual Studio Code 的 调试 功能 非常 强大 ， 可 以 非常 方 
便 地 设置 断 点 来 跟踪 和 调试 代码 。 

对 于 前 端 JavaScript 的 编写 ， 简 单 、 常 用 的 调试 方法 是 在 控制 台 打 印 出 信息 ， 但 现在 可 以 
借助 Visual Studio Code 对 JavaScript 进行 断 点 调试 。 在 断 点 的 地 方 , 我 们 可 以 把 鼠标 悬 停 到 变 
量 名 上 来 查看 此 时 的 变量 值 ， 如 图 6.2 所 示 。 


© index html x bh 人 e+? © nm | {launchjon 也 
1 <!DOCTYPE html> 
2 <html lang="en"> 
3 
4 head> 
5 <meta charset="UTF-8"> 
6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
学 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
8 <title>Document</title> 
9 <script> 
10 window.onload = function() { 
11 var msg = "hello world"; 
@ 12 var len = msg.length; 
13 alert("hello world"); 
14 } 
15 </script> 
16 </head> 
17 
18 <body> 


6.2 Visual Studio Code 代码 调试 界面 


3. 内 置 Git 支持 

代码 的 版 本 管理 对 于 一 个 团队 项 目 来 说 非常 重要 。 一 个 大 型 的 项 目 代 码 结构 往往 比较 复 
杂 , 且 有 多 个 开发 人 员 协 同 开发 。 开发 人 员 每 日 编写 的 代码 必须 提交 到 服务 器 , 开发 人 员 也 可 
以 定期 来 同步 文件 到 本 地 ， 从 而 保证 最 终 合 并 的 项 目 代码 是 一 个 统一 的 版 本 。 

Visual Studio Code 内 置 Git， 可 以 对 项 目 代码 进行 版 本 控制 。Git 是 一 个 开源 的 分 布 式 版 
本 控制 系统 ， 可 以 有 效 、 高 速 地 处 理 从 很 小 到 非常 大 的 项 目 版 本 管理 。 

因此 ，Visual Studio Code 不 仅 是 一 个 代码 编辑 工具 ， 还 是 一 个 代码 版 本 管理 工具 。 关 于 
如 何 使 用 Git 的 内 容 已 超出 本 书 范围 ， 感 兴趣 的 读者 可 以 自行 搜索 资料 进行 学 习 。 


二 安装 Git 工具 后 才能 使 用 Visual Studio Code 中 的 版 本 管理 功能 。 | 


4. 扩展 
据 不 完全 统计 ，Visual Studio Code 有 4000 多 个 扩展 ， 涵 盖 的 范围 非常 广泛 。 开 发 人 员 可 
以 利用 Visual Studio Code 中 的 扩展 功能 来 下 载 自 己 需要 的 扩展 ， 如 图 6.3 所 示 。 
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地 Eile Edit Selection View Go Debug Ierminal Help 
EXTENSIONS: MARKETPLACE 至 
java 
Language Support for Java(TM) by ... 0400 今 131M 太 45 
Java Linting, Intellisense, formatting, refactoring, Maven/G... 
Red Hat 章 
Debugger for Java 017( 人 65M 责 5 
多 A lightweight Java debugger for Visual Studio Code 
Microsoft 盖 
Maven for Java 0150 命 72M 去 45 
MM Manage Mavenprojects execute goaks generate projectf 
Microsoft 人 
Java Test Runner 0141 人 P68M 4 
区 Run and debug JUnit or TestNG test cases 
Microsoft 浆 
Java Extension Pack 050 个 34M 实 45 
四 Popular extensions for Java development and more. 
Microsoft Eo 
3 Java Debug 002 < 人 114K 雪 5 
人 笃 ' Asimple debug extension for the Java 
Pe BginDeng 
¢ Java Language Support 0213 人 673K 娘 4 
时 Java support using the java Compiler API 
Java George Fraser II 


图 6.3 Visual Studio Code 插件 管理 界面 


下 面 重点 讲解 如 何 利 用 Visual Studio Code 开发 TypeScript 应 用 。 这 里 假设 已 经 安装 好 了 
npm 和 TypeScript 开发 环境 ， 同 时 安装 了 Visual Studio Code 工具 。 不 清楚 如 何 安装 的 读者 可 
以 重新 阅读 第 1 章 的 相关 内 容 。 


6.1.1 在 Visual Studio Code 中 新 建 TypeScript 应 用 


建立 一 个 项 目 文件 夹 (如 vscode), 然后 打开 Visual Studio Code 编辑 器 , 单 击 菜单 栏 [File】， 
此 时 弹出 下 拉 菜单 ， 如 图 6.4 所 示 。 


区 File Edit selection View Go Debug 


New File Ctri+N 
New Window Ctrl+Shift+N 
Open File. Ctrl+O 


Open Folder... Ctrl+K Ctrl+O 


Open Workspace... 


Open Recent > 


Add Folder to Workspace... 


6.4 Visual Studio Code 文件 夹 打开 界面 
在 图 6.4 中 , 可 以 看 到 很 多 菜单 项 , 这 里 单 击 【Open Folder...】 选 项 , 选择 刚才 新 建 的 vscode 
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文件 来， 如 图 6.5 所 示 。 


过 Open Folder x 
< ~ 个 «Src ，charpter6 Y © 守 R charpter6" 忆 
组 织 ” 新建 文件 去 Ev @ 
idea workspac ^ 。 包 称 入 修改 日 其 类 型 
吉 SSD (C FE 2019/3/7 22:25 文件 去 
TypescriptN 门 
全 OneDrive 
人 WPS 网 盘 
加 比 电 芒 > 
文件 实 : [ scode 
迁 泽 文件 夫 取消 


6.5 Visual Studio Code 文件 夹 选择 界面 


Visual Studio Code 中 创建 的 项 目 都 是 放 于 文件 夹 中 的 。 一 般 情况 下 ， 建 议 文件 夹 用 英文 
命名 ， 同 时 项 目 文件 的 路 径 不 要 过 深 或 者 空格 等 ， 防 止 一 些 命令 无 法 识别 此 路 径 。 在 图 6.5 中 
单 击 【 选 择 文件 夹 】 按 钮 ，Visual Studio Code 会 加 载 此 文件 夹 并 扫描 里 面 的 文件 夹 及 文件 。 
此 时 ， 我 们 的 项 目 文件 夹 是 空 的 。 

一 般 来 说 ，Visual Studio Code 左边 有 一 个 快速 工具 栏 ， 上 面 主要 有 4 大 功能 ， 第 1 个 是 
文件 资源 管理 器 视图 , 第 2 个 是 搜索 视图 , 第 3 个 是 Git 代码 管理 视图 , 第 4 个 是 调试 (Debug) 
视图 。 单 击 调试 图 标 〈 图 6.6 标注 为 D) ， 切 换 到 调试 配置 界面 ， 如 图 6.6 所 示 。 


<a) File Edit Selection View Go Debug Terminal Help 


DEBUG > No Configurations v 桨 * 品 


4 VARIABLES 


®@ 
4 WATCH 


图 6.6 Visual Studio Code 调试 配置 界面 


| 这 里 的 Visual Studio Code 并 没有 安装 中 文 包 ， 因 此 可 能 和 你 使 用 的 界面 存在 差异 ， 但 是 
蕊 不 影响 使 用 。 


6.1.2 配置 Visual Studio Code 的 launch.json 
打开 Visual Studio Code 调试 (debug) 界面 , 单 击 图 6.6 中 加 处 的 齿轮 图 标 让 Visual Studio 
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Code 自动 帮 我 们 新 建 一 个 launch.json 启动 配置 文件 ) 文件 (存放 在 根 目录 下 的 .vscode 文 
件 中 ) 。.vscode 是 Visual Studio Code 开发 工具 特有 的 文件 夹 ， 主 要 用 来 存放 调试 时 需要 用 到 
的 启动 配置 文件 。 

首次 单 击 图 6.6 中 加 处 的 齿轮 图 标 时 会 弹出 一 个 命令 面板 ， 让 我 们 选择 开发 环境 ， 支 
持 .NET Core、Java、Node.js 和 PHP 等， 如 图 6.7 所 示 。 


3) Ele Edit Selection View Go Debug Terminal Help vscode - Visual Studio Code 
DEBUG | * | No| select Environment 
4 VARABLEs NET Core 


C++ (GDB/LLDB) 
C++ (Windows) 
Chrome 
Java 
Nodejs 

4 WATCH PHP 
More.. 


图 6.7 Visual Studio Code 运行 环境 选择 界面 


Visual Studio Code 内 置 Nodejjs 运行 时 能 调试 JavaScript 和 TypeScript 代码 。 这 里 我 们 选 
择 Node.js 作为 开发 和 调试 环境 。 

此 时 ，Visual Studio Code 会 自动 为 我 们 创建 启动 配置 文件 launch.json， 如 图 6.8 所 示 。 
launch.json 默认 的 配置 比较 多 ， 在 configurations 节点 中 可 以 看 到 一 个 type 为 node 的 配置 ， 说 
明 当 前 的 启动 环境 是 Node.js。name 为 启动 项 的 名 字 ， 可 以 修改 。program 是 启动 文件 ， 相 当 
于 main 函数 文件 ， 是 项 目的 入 口 。 


~) Ele Edit Selection View Go Debug Ierminal Help launchjson - vscode - Visual Studio Code 


EXPLORER launchjson x 
4 OPEN pmons 1 多 
XM (Faunchjson wcod 2 // Use Intellisense to learn about possible| 
RR 3 // Hover to view descriptions of existing al 
4 lation, visit: https://go. 
4 vscode 一 
{} launchjson 6 
8 
9 
10 aunch Program", 
11 "program": "${file)}" 
12 } 
13 ] 
14 下 


图 6.8 launch.json 默认 的 配置 界面 


Visual Studio Code 有 很 多 默认 的 快捷 键 ， 熟 悉 这 些 快 捷 键 对 于 提高 开发 效率 非常 有 好 处 ， 
如 Fl12 转 到 定义 、ShiftrAltrF 格式 化 代码 。 要 想 完整 查看 这 些 快 捷 键 列表 ， 可 以 访问 
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf。 

每 个 启动 配置 都 必须 具有 以 下 属性 : 
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type: 用 于 启动 配置 的 调试 器 类 型 。node 是 内 置 的 JavaScript 和 TypeScript 调试 器 。 
request: 用 于 配置 启动 配置 的 请 求 类 型 ， 支 持 launch 和 attach 两 种 。 

name: 启动 项 名 称 ， 显 示 在 “调试 启动 配置 ”下 拉 列 表 中 。 

program: 启动 调试 器 时 要 运行 的 文件 。 


以 下 是 启动 配置 的 一 些 可 选 属性 : 


preLaunchTask: 要 在 调试 会 话 开 始 之 前 启动 任务 ， 请 将 此 属性 设置 为 tasks.json 中 指 
定 的 任务 名 称 。tasks.json 文件 放 在 .vscode 文件 夹 中 。 

postDebugTask: 要 在 调试 会 话 之 后 启动 的 任务 , 请 将 此 属性 设置 为 tasks.json 中 指定 
的 任务 名 称 。 

internalConsoleOptions: 控制 调试 会 话 期 间 “ 调 试 控制 台 ” 面 板 的 可 见 性 。 
debugServer: 允许 我 们 连接 到 指定 的 端口 ， 而 不 是 启动 调试 适配器 。 


许多 调试 器 支持 下 面 的 某 些 属性 : 


args: 传递 给 程序 进行 调试 的 参数 。 

Env: 环境 变量 (该 值 null 可 用 于 “取消 定义 ”变量 ) 。 

cwd: 当前 工作 目录 ， 用 于 查找 依赖 项 和 其 他 文件 。 

port: 连接 到 正在 运行 的 进程 时 的 端口 。 

stopOnEntry: 程序 启动 时 立即 中 断 。 

Console: 要 使 用 什么 样 的 Console ， 有 internalConsole 、integratedTerminal 和 
externalTerminal 三 种 选项 。 


在 官网 https://code.visualstudio.com/docs/editor/debugging# launch-configurations 上 可 以 查 
看 更 多 的 配置 信息 。 

Visual Studio Code 支持 在 调试 和 任务 配置 文件 中 使 用 变量 替换 占 位 符 , 从 而 提高 配置 
的 灵活 性 。 使 用 变量 蔡 换 占 位 符 中 的 $ {variableName} 语 法 可 在 launch.json 和 tasks.json 文 
件 中 使 用 。 

Visual Studio Code 支持 以 下 预定 义 变量 : 


$ {workspaceFolder}: 在 VS Code 中 打开 的 文件 夹 的 路 径 。 

$ {workspaceFolderBasename}: VS 代码 中 打开 的 文件 夹 的 名 称 ， 没 有 斜 杠 (/) 。 
$ {file}: 当前 打开 的 文件 。 

$ {relativeFile}: 当前 打开 的 文件 相对 于 workspaceFolder。 

$ {fileBasename}: 当前 打开 文件 的 基本 名 称 。 

$ {fileBasenameNoExtension}: 当前 打开 文件 的 基本 名 称 ， 没 有 文件 扩展 名 。 

$ {fileDimame}: 当前 打开 文件 的 目录 名 。 

$ {fileExtname}: 当前 打开 文件 的 扩展 名 。 

$ {cwd}: 启动 时 任务 运行 器 的 当前 工作 目录 。 
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@ $ilineNumber}: 活动 文件 中 当前 选 定 的 行 号 。 

@ 9$ {selectedText}: 活动 文件 中 当前 选 定 的 文本 。 

®@ ${fexecPath}: 运行 VS Code 可 执行 文件 的 路 径 。 

在 官网 https://code.visualstudio.com/docs/editor/variables-reference 上 可 以 查看 更 多 的 变量 
蔡 换 占 位 符 使 用 方法 。 


1 在 Visual Studio Code 中 即使 未 打开 项 目 文件 夹 ， 也 可 以 调试 一 个 简单 的 应 用 程序 ， 但 是 
| 无 法 管理 启动 配置 和 设置 高 级 调试 。 如 果 没 有 打开 文件 夹 ， 则 Visual Studio Code 代码 状 
态 栏 为 紫色 。 


启动 配置 中 可 用 的 属性 因 调 试 器 类 型 而 异 ,不 要 假设 一 个 调试 器 可 用 的 属性 也 自动 适用 于 
其 他 调试 器 。 如 果 您 在 启动 配置 文件 中 看 到 绿色 波形 的 提示 ， 就 将 鼠标 悬 停 在 它们 上 ， 以 了 解 
问题 原因 ， 如 果 有 必要 就 修复 它们 。 

如 果 想 对 Visual Studio Code 进行 个 性 设置 ， 可 以 用 快捷 键 Ctrl+, 打开 设置 界面 ， 进 行 字 
体 以 及 大 小 等 配置 ， 如 图 6.9 所 示 。 


Search setting: 


User Settings «= Workspace Settings 


Commonly Used 


Flles Auto Save 


off 


Files: Auto Save Delay 
Controls the delay in ms after which a dirty file is saved automatically. Only applies 


1000 


Editor: Font Size 


闪 Editor: Font Fami 


Controls the 


Consolas, ‘Courier New., monoaspacd| 


6.9 Visual Studio Code 设置 界面 


launch.json 中 的 configurations 属性 是 一 个 数组 ， 说 明 可 以 添加 多 个 启动 配置 项 。 在 某 些 
复杂 的 项 目 中 , 往往 项 目 由 多 个 子 项 目 构成 ， 如 服务 器 端 一 个 项 目 、 客 户 端 一 个 项 目 。 此 时 的 
入 口 文件 是 两 个 。 调 试 的 时 候 也 需要 用 到 多 目标 调试 。 

Visual Studio Code 支持 多 目标 调试 。 使 用 多 目标 调试 很 简单 ， 在 launch.json 中 的 
configurations 属性 配置 多 个 启动 项 ， 在 启动 第 一 个 调试 会 话 后 还 可 以 启动 另 一 个 调试 会 话 。 
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一 旦 有 第 二 个 调试 会 话 启动 ，Visual Studio Code 就 会 切换 到 多 目标 模式 。 调 试 工具 栏 显示 当 
前 活动 的 会 话 ( 其 他 调试 会 话 可 以 在 下 拉 菜 单 中 选择 进行 切换 ) ， 如 图 6.10 所 示 。 


pO | severr 


6.10 ”Visual Studio Code 多 目标 调试 工具 栏 


启动 多 目标 调试 的 时 候 , 一 个 一 个 启动 比较 麻烦 , 我 们 可 以 将 单个 启动 调试 项 配置 组 合 到 
一 起 ， 即 使 用 复合 (compounds〉 启 动 配置 。 复 合 启 动 配置 列 出 了 应 并 行 启动 的 两 个 或 多 个 启 


动 配置 的 名 称 。 
复合 启动 配置 名 称 显示 在 启动 配置 下 拉 菜 单 中 。 代 码 6-1 给 出 在 launchjson 文件 中 配置 复 
合 启 动 项 的 示例 。 
【代码 6-1】 复合 启动 配置 launch.json 的 示例 代码 : mlaunch.json 
01 
02 worsionm OZ 
03 "configurations": [{ 
04 "type": "node", 
05 "request": "launch", 
06 "name": "Server", 
07 "program": "${workspaceFolder}/server.js", 
08 "cwd": "${workspaceFolder}" 
09 }, 
10 { 
ll "type": "node", 
le "request": "launch", 
13 "name": "Client", 
14 "program": "${workspaceFolder}/client.js", 
15 "cwd": "${workspaceFolder}" 
16 } 
17 js 
18 "compounds": [{ 
19 "name": "Server/Client", 
20 "configurations": ["Server", "Client"] 
21 | 
4 } 


一 旦 在 launchjson 文件 中 配置 复合 启动 项 之 后 ， 就 可 以 在 Visual Studio Code 的 调试 视图 
中 从 启动 配置 下 拉 菜 单 中 选择 可 以 启动 的 项 。 代 码 6-1 在 configurations 属性 中 配置 了 3 个 启 
动 项 ,， name 分 别 为 Server、Client 和 Server/Client。 在 启动 配置 下 拉 菜 单 中 会 显示 这 3 个 选项 ， 
我 们 直接 选择 符合 启动 项 即 可 同时 启动 服务 端 和 客户 端 程序 ， 如 图 6.11 所 示 。 


168 


第 6 章 项 目 必 备 工 具 


P | Server/Client 
| Server 

Client 

Server/Client 


| Add Configuration.. 


6.11 Visual Studio Code 多 目标 调试 工具 栏 


Visual Studio Code 需要 .NET Framework 4.5.2 或 更 高 版 本 。 如 果 使 用 的 是 Windows7， 请 
I 确保 至 少 安装 了 NET Framework 4.5.2。 


我 们 切换 到 Visual Studio Code 文件 资源 管理 器 视图 中 ， 如 图 6.12 所 示 。 我 们 可 以 看 到 
在 .vscode 文件 夹 下 有 一 个 文件 launch.json。 此 文件 暂时 不 用 修改 ， 等 后 续 再 根据 项 目的 具体 
情况 进行 配置 。 在 图 6.12 中 ， 可 以 通过 图 标 按钮 快速 新 建文 件 和 新 建文 件 夹 。 


3 File Edit selection View Go Debug Terminal Help 


EXPLORER 


< OPEN EDITORS 
X {} launchjson vscode 
4 vscopE 加 
4 vscode 
{) launchjson 


图 6.12 ”Visual Studio Code 文件 资源 管理 器 视图 


在 文件 资源 管理 器 中 ， 创 建 项 目的 文件 目录 结构 。 在 根 目 录 下 新 建 一 个 文件 夹 src， 用 于 
存放 TypeScript 源 文件 ， 再 新 建 一 个 dist 目录 ， 用 于 存放 生成 的 JavaScript 文件 。 在 src 目录 
下 新 建 一 个 app.ts 作为 入 口 函 数 。app.ts 文件 的 内 容 如 代码 6-2 所 示 。 


【代码 6-2】 app.ts 的 示例 代码 : app.ts 


[i function hello(msg:string){ 
02 let ret ="Hello " + msg; 
03 console.log (ret); 

04 } 

05 hello("typescript"); 


6.1.3 ”初始 化 项 目 package.json 


我 们 的 TypeScript 开发 是 要 借助 Nodejs 运行 环境 的 ， 每 个 项 目的 根 目录 下 一 般 都 有 一 个 
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package.json 文件 。 该 文件 定义 了 这 个 项 目 所 依赖 的 各 种 模块 以 及 项 目的 配置 信息 。 
命令 npm install 会 根据 这 个 配置 文件 自动 下 载 所 需 的 模块 , 也 就 是 配置 项 目 所 需 的 
依赖 库 。package.json 文件 中 描述 这 个 npm 包 的 所 有 相关 信息 ， 包 括 作 者 、 简 介 、 包 依赖 、 构 


包 管 理 


建 等 信息 ， 格 式 是 严格 的 JSON 格式 。 


那么 如 何 创建 这 个 package.json 呢 ? 可 以 借助 npm init 命令 来 自动 构建 packagejson 文件 。 
在 Visual Studio Code 的 调试 视图 中 ， 单 击 调试 控制 台 图 标 ， 可 以 打开 调试 控制 台面 板 ， 如 图 


6.13 所 示 。 


单 击 图 6.13 调试 控制 台 图 标 按钮 后 会 在 Visual Studio Code 的 底部 打开 一 个 面板 。 单 击 


DEBUG j* launchprograme vv 向 | 品 


图 6.13 ”Visual Studio Code 调试 控制 台 启 动 图 标 界面 


【TERMINAL 】 标 签 ， 切 换 到 PowerShell 命令 行 界面 ， 如 图 6.14 所 示 。 


在 图 6.14 中 的 命令 行 中 输入 npm init 命令 ， 然 后 根据 提示 一 步 一 步 进行 配置 即 可 ， 按 照 


TERMINAL 


Windows PowerShell 
版 权 所 有 (C) Microsoft Corporation。 保 留 所 有 权利 。 


PS C:\src\scode-typescript> 目 


图 6.14 Visual Studio Code 终端 命令 行 界面 


向 导 可 以 输入 package name、version、entry point 等 信息 ， 如 图 6.15 所 示 。 


配置 完成 后 , npm init 命令 会 在 当前 根 目 录 下 创建 package.json, 生成 的 package.json 文件 


PROBLEMS OUTPUT TERMINAL ene 1: powershell ， 中 口 六 


Windows PowerShell 
版 权 所 有 (C) Microsoft Corporation。 保 凡 


PS C:\Src\charpteré\vscode> npm init 
This utility will walk you through creating a package.json file. 
Tt only covers the most common items, and tries to guess sensible defaults. 


See “npm help json”for definitive documentation on these fields 
and exactly what they do. 


Use “npm install <pkg>”afterwards to install a package and 
save it as a dependency in the package.json file. 


Press °C at any time to quit. 

package name: (vscode) vscode-typescript 
version: (1.6.6) 

description: debug tool 

entry point: (index.js) 

test command: 

Bit repository: 

keywords: 

author: jackwang 


6.15 终端 命令 npm init 配置 界面 


内 容 如 代码 6-3 所 示 。 
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【代码 6-3】 package.json 代码 : package_initjson 


01 4 
02 "name": "vscode-typescript", 


03 raion sO 人 OA 

04 "description": "debug tool", 

05 "madn™s. "index. js™r 

06 Woripts"s | 

07 "test": "echo \"Error: no test specified\" && exit 1" 
08 }, 

09 "author": "jackwang", 

10 -License"e “1SC” 


轿 直 | packagejson 必须 是 一 个 严格 的 JSON 文件 ， 换 句 话说 是 不 允许 有 注释 的 ， 和 否则 会 | 
[ 提示 错误 。 


package.json 文件 就 是 一 个 JSON 对 象 ， 该 对 象 的 每 一 个 成 员 就 是 当前 项 目的 一 项 设置 ， 
比如 name 是 项 目 名 称 、version 是 版 本 号 (遵守 大 版 本 .次 要 版 本 .小 版 本 的 格式 ) 。name 和 
version 是 package.json 中 的 两 个 重要 字段 ， 也 是 发 布 到 NPM 平台 上 的 唯一 标识 。 如 果 没 有 正 
确 设置 这 两 个 字段 ， 包 就 不 能 发 布 和 被 下 载 。 

package.json 中 的 一 些 属性 说 明 如 下 : 


@ name: 包 名 称 ， 最 重要 的 字段 之 一 ， 如 "vscode-typescript"。 

@ version: 包 版 本 号 ， 最 重要 的 字段 之 一 ， 如 "1.0.0"。 

@ description: 包 的 描述 信息 ， 将 会 在 npm search 的 返回 结果 中 显示 ， 以 帮助 用 户 选 择 

合适 的 包 。 

keywords: 包 的 关键 词 信息 ， 是 一 个 字符 串 数 组 ， 也 将 显示 在 npm search 的 结果 中 。 

Homepage: 包 的 主页 地 址 。 

license: 包 的 开源 协议 名 称 。 

author: 包 的 作者 。 

files: 包 所 包含 的 所 有 文件 ， 可 以 取 值 为 文件 夹 。 通 常 我 们 还 是 用 .npmignore 来 去 除 

不 想 包 含 到 包 里 的 文件 。 

@ main: 包 的 入 口 文件 。 

@ bin: 如 果 你 的 包 里 包含 可 执行 文件 ， 通 过 设置 这 个 字段 可 以 将 它们 包含 到 系统 的 
PATH 中 ， 这 样 直接 就 可 以 运行 ， 很 方便 。 

@ directories: CommonJS 包 所 要 求 的 目录 结构 信息 ， 表 示 项 目的 目录 结构 信息 。 字 段 
可 以 是 : lib、bin、man、doc、example。 值 都 是 字符 串 。 

@ repository: 包 的 仓库 地 址 。 

@ scripts: 通过 设置 这 个 可 以 使 npm 调用 一 些 命令 脚本 ， 封 装 一 些 功能 。 
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6.1 


人 


4 


config: 添加 一 些 设置 ， 可 以 供 scripts 读 取 用 ， 同 时 这 里 的 值 也 会 被 添加 到 系统 的 环 
境 变量 中 。 

dependencies: 指定 依赖 的 其 他 包 ， 这 些 依赖 是 指 包 发 布 后 正常 执行 时 所 需要 的 ， 也 
就 是 线 上 需要 的 包 。 使 用 npm install --save packageName 命令 来 安装 。 
devDependencie: 这 些 依赖 只 有 在 开发 时 才 需 要 。 使 用 npm install --save-dev 
packageName 命令 来 安装 。 

peerDependencie: 相关 的 依赖 ， 如 果 你 的 包 是 插件 ， 而 用 户 在 使 用 这 个 包 的 时 候 通常 
也 会 需要 这 些 依赖 (插件) ， 那 么 可 以 将 依赖 列 到 这 里 。 

bundledDependencies: 绑 定 的 依赖 包 ， 发 布 的 时 候 这 些 绑 定 包 也 会 被 一 同 发 布 。 
engines: 指定 包 运行 的 环境 ， 可 以 对 node 和 npm 版 本 进行 限制 。 

private: 设 为 true 时 这 个 包 将 不 会 发 布 到 NPM 平台 。 


安装 typescript 依赖 


由 于 我 们 要 用 Visual Studio Code 开发 TypeScript 程 序 , 因此 在 开发 阶段 需要 依赖 typescript 
库 ， 在 Visual Studio Code 的 PowerShell 命令 行 中 用 如 下 命令 安装 开发 依赖 库 : 


npm install typescript --save-dev 
安装 成 功 后， 会 自动 在 package.json 文件 的 devDependencies 属性 下 写 入 如 下 内 容 : 


"devDependencies": { 


外 


pe 


修改 package.json 文件 的 内 容 ， 最 终 的 配置 内 容 如 代码 6-4 所 示 。 
【代码 6-4】 package.json 的 示例 代码 : packagejson 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
于 
12 
Ebel 
14 


‘ 
"name": "vscode-typescript", 
-version™s wi .0.0 
"description": "debug tool", 
an amp To 
SG 
"prebuild ts": "tsc" 
}, 
"author": "jackwang", 
"license": "ISC", 
"devDependencies": { 
he el be ee ee sse he 
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在 packagejson 中 ， 不 但 不 能 有 注释 ， 如 果 一 行 后 没有 同 级 的 语句 ， | 
许 的 ， 否 则 在 编译 时 会 报错 。 


6.1.5 


添加 并 配置 tsconfig.json 


如 果 一 个 目录 里 存在 一 个 tsconfig.json 文件 ， 就 意味 着 这 个 目录 是 TypeScript 项 目的 根 目 
录 。tsconfig.json 文件 中 指定 了 用 来 编译 这 个 项 目的 根 文件 和 编译 选项 。 在 不 带 任何 输入 文件 
的 情况 下 调用 命令 tsc, 编译 器 会 从 当前 目录 开始 去 查找 tsconfig.json 文件 , 如 果 没 有 就 逐 级 向 
上 搜索 父 目录 。 
在 Visual Studio Code 的 文件 资源 管理 器 中 直接 通过 添加 文件 的 方式 创建 tsconfig.json, 然 
后 配置 tsconfig.json 内 容 ， 如 代码 6-5 所 示 。 


【代码 6-5】 配置 tsconfig.json 代码 : tsconfigjson 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
sel 
le 
3 
14 
5 
16 
7 
18 
19 


{ 


"compilerOptions": { 


J 


"target": "es5", 
"esModuleInterop": true, 
"noImplicitAny": false, 

"module": "commonjs", 
"removeComments": false, 
"sourceMap": true, 

"outDires ~ /dlet™ 
"allowUnreachableCode": false, 
"allowUnusedLabels": false, 
"noUnusedLocals": true, 
"noImplicitReturns":true, 
"noFallthroughCasesInSwitch":true, 


"experimentalDecorators": true 


"include":[ 


]， 


WSsrc/**/*" 


"exclude"”: [ 


"node modules", 


在 代码 6-5 中 ， 我 们 配置 了 编译 器 的 相关 选项 。 


@ target 属 性 为 "es5", 表示 将 TypeScript 代 码 编译 为 符合 ES5 规范 的 JavaScript 代码 target 
可 选 的 值 为 'ES3' (默认 ) 、'ES5'、'ES2015'、'ES2016'、'ES2017'、'ES2018' 或 'ESNEXT'。 
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@ module 属性 表示 模块 代码 规范 , 可 选 的 值 为 none'、commonjs'、'amd'、'system'、'umd'、 
'es2015' 或 ESNext 。 

@ outDir 属性 表示 编译 的 代码 输出 目录 。 

@ sourceMap 属性 设 为 true, 表示 在 编译 TypeScript 文 件 到 JavaScript 文 件 时 同时 生成 .map 
的 文件 。SourceMap 是 一 个 存储 源 代 码 与 编译 代码 对 应 位 置 映射 的 信息 文件 ， 对 于 TypeScript 
文件 的 调试 需要 SourceMap 帮助 我 们 在 控制 台中 转换 成 源码 ， 从 而 进行 源码 调试 。 

@ noImplicitAny 属性 默认 为 false, 表示 如 果 编 译 器 无 法 根据 变量 的 用 途 推断 出 变量 的 类 
型 , 就 会 悄悄 地 把 变量 类 型 默认 为 any。 这 个 可 能 导致 类 型 错误 , 因此 建议 将 其 配置 为 true, 此 
时 TypeScript 编译 器 在 无 法 推断 出 变量 类 型 时 就 会 报告 一 个 错误 ， 但 也 可 以 生成 JavaScript 
文件 。 

"include" 和 "exclude" 属 性 指定 一 个 文件 glob 匹配 模式 列表 。 支 持 的 glob 通配符 有 : 


@ *: 匹配 0 或 多 个 字符 (不 包括 目录 分 隔 符 ) 。 
@ ?: 匹配 一 个 任意 字符 (不 包括 目录 分 隔 符 ) 。 
@  *#/: 递归 匹配 任意 子 目 录 。 


如 果 一 个 glob 模式 里 的 某 部 分 只 包含 * 或 .*， 那 么 仅 有 支持 的 文件 扩展 名 类 型 被 包含 在 内 
(比如 默认 .ts、.tsx 和 .dts， 如 果 allowJs 设置 为 true 就 还 包含 js 和 .jsx) 。 

如 果 "files" 和 "include" 属 性 都 没有 被 指定 ， 编 译 器 默认 包含 当前 目录 和 子 目录 下 所 有 的 
TypeScript 文件 (ts、.d.ts 和 .tsx) ， 排 除 在 "exclude" 里 指定 的 文件 。 

因此 include 属性 配置 为 "sre/**/*" 表 示 包 含 根 目录 中 sre 文件 夹 下 所 有 文件 扩展 名 为 .ts、tsx 
和 .d.ts (包括 子 目录 )。 

另外 ，exclude 属性 配置 为 "node_modules" 表 示 排 除根 目录 下 的 node_modules 目录 ， 这 样 
可 以 提高 编译 的 速度 。 

@ removeComments 属性 表示 在 生成 JS 代码 的 时 候 是 否 要 移 除 注释 。 一 般 情况 下 ， 如 果 
是 发 布 ， 可 以 将 其 设置 为 true 来 移 除 注 释 ， 从 而 减 小 文件 的 大 小 ， 提 高 加 载 的 速度 。 

allowUnreachableCode 属性 表示 是 否 人 允许 不 可 达 的 代码 出 现 , 默认 值 是 true。 如 果 设 置 
为 false， 则 不 允许 出 现 ， 一 旦 代码 中 出 现 此 类 错误 ， 就 会 报错 。 建 议 将 其 设置 为 false。 

@ allowUnusedLabels 属性 表示 是 否 报告 未 使 用 的 标签 错误 ， 默 认 值 是 false。 

noImplicitReturns 属性 表示 当 不 是 函数 的 所 有 路 径 都 有 返回 值 时 报错 ， 默 认 是 false。 
这 里 设置 为 tue， 则 当 函 数 有 的 路 径 没 有 返回 值 的 时 候 会 报错 。 

@ noFallthroughCasesInSwitch 默认 值 是 false， 此 处 设置 为 tue， 表 示 报 告 switch 语句 的 
fallthrough 错误 。 

@ experimentalDecorators 默认 值 为 false， 这 里 设置 为 tue， 表 示 启 用 实验 性 的 ES 装饰 器 。 


在 官网 https:/www.tslang.cn/docs/handbook/tsconfig-json.html 上 可 以 查看 更 多 的 配置 属性 。 
在 https://www.tslang.cn/docs/handbook/compiler-options.html 上 可 以 查看 更 多 的 编译 选项 。 
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画 我 们 可 以 用 命令 tsc --init 自动 创建 tsconfigjson。 | 


最 终 ，launch.json 文件 的 内 容 如 代码 6-6 所 示 。 
【代码 6-6】 配置 tsconfigjson 代码 : tsconfig.json 


01 { 

02 ~yorsion se "O20 

03 "configurations": [ 

04 1 

05 "type": "node", 

06 "request": "launch", 

07 "name": "启动 "， 

08 "program": "${workspaceRoot}/dist/app.js", 
09 "stopOnEntry": false, 

10 "cwd": "${workspaceRoot}", 

EE "preLaunchTask": "build ts", 
12 "env": { 

13 "NODE_ENV": "development" 
14 }, 

15 "console": "internalConsole", 
16 "sourceMaps": true 

17 } 

18 ] 

19 i 


二 program 需 设置 为 你 要 调试 的 ts 生成 的 对 应 js 文件 。 | 


6.1.6 ”添加 并 配置 tasks.json 


tasks.json 和 launch.json 配置 文件 一 样 ， 需 要 放 到 .vscode 文件 夹 中 。tasksjjson 配置 文件 可 
以 配置 多 个 任务 ， 这 些 任务 可 以 在 launch.json 配置 文件 中 使 用 ， 一 般 用 于 在 启动 前 任务 
(preLaunchTask ) 或 者 调试 后 任务 (postDebugTask) 。 
launch.json 可 以 调用 tasks.json 的 任务 ， 而 tasks.json 中 的 任务 可 以 调用 package.json 中 的 
脚本 ， 如 果 packagejson 的 脚本 是 tsc， 那 么 又 可 以 调用 tsconfig.json 中 的 配置 信息 。 这 几 种 文 
件 之 间 的 关系 如 图 6.16 所 示 。 
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{) launchjson @ 1 tasksjson © 
2 
"version": "9.2.9", "version": "2.9.9", 
"configurations"; [ 


"launch", 


: "S${workspaceRoot}/dist/app.js’ 
"stopOnEntry": false, 
"ewd": "S${workspaceRoot}", 
"preLaunchTask": "build ts",@ 
“env": { 
"NODE_ENV": "development" 
}, 
"console": "internalConsole"， 
“sourceMaps": true > 
"prebuild ts": "tsc” 和 
]， 
"author": "jackwang", 
18 "license": "TSC" 
11 "devDependencie 
12 “typescript 
13 } 
14 } 
15 


图 6.16 三 种 配置 文件 命令 之 间 的 调用 关系 示意 图 


副 task 中 的 标签 label 名 可 以 被 外 部 引用 。 | 


launch.json 中 的 preLaunchTask 配置 的 任务 名 实际 上 就 是 task.json 文件 中 的 任务 标签 
label 名 。 其 中 ，tasks.json 的 脚本 script 配置 为 prebuild_ts， 这 个 是 在 package.json 里 面 定 


义 的 。 
在 Visual Studio Code 中 ， 利 用 新 建文 件 的 方式 将 tasks.json 添加 到 .vscode 目录 下 ， 并 修 
改 其 内 容 如 代码 6-7 所 示 。 
【代码 6-7】 tasks.json 配置 代码 : tasksjson 
01 
02 TGSAODRT 2 DOR7 
03 waakew lt 
04 "type": "npm", 
05 "script": "Prebuild ts", 
06 "label": "build ts" 
07 }] 
08 } 
在 代码 6-7 中 ，07 行 定义 了 一 个 type 为 npm、script 为 prebuild ts 的 任务 。 这 个 任务 可 


A 


以 用 npm run prebuild ts 运行 ， 如 图 6.17 所 示 。 
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1 packagejson x 
“vscode-typescript", 


debug tool", 


“scripts": { 
@ "prebuild ts": "tsc" 


1: powershell 
PS C:\sre\charpteré\vscode> npm run prébuild ts @ 


> vscode-typescript@1.0.8 prebuild_ts C:\src\charpteré\vscode 
> tse 


ps ci\src\eharpter6\scode> 四 


6.17 ”package.json 脚本 命令 运行 界面 


6.1.7 ”调试 运行 

至 此 ,我们 就 可 以 对 代码 进行 调试 了 。 首 先 在 app.ts 中 给 第 3 行 代码 添加 调试 断 点 ， 用 鼠 
标 在 左边 的 行 空白 区 域 单 击 即 可 。 断 点 添加 成 功 后 ， 会 在 代码 行 左边 显示 一 个 红色 的 小 圆圈 ， 
如 图 6.18 所 示 。 

另外 需要 注意 的 是 ， 我 们 安装 的 TypeScript 版 本 是 3.3.3333， 而 从 Visual Studio Code 状 
态 栏 上 看 到 TypeScript 版 本 为 3.3.1 (打开 app.ts 文件 时 才能 显示 此 状态 栏 ) ， 如 图 6.19 所 示 。 


Lint 2: Task -build ts " 中 加 和合 入 x 
1 function hello(msg:string){ 
2 let ret ="Hello ”+ msg; 
@ 3 console.log(ret); 
4 } y tasks, press any key to close it. 
5 hello("typescript"); 
6 
UTF-8 CRLF Typescript 33.1 ATsLint 四 a 


图 6.18 ”package.json 脚本 命令 运行 界面 6.19 ”TypeScript 版 本 状态 栏 选择 界面 


那么 我 们 如 何 进行 TypeScript 版 本 切换 呢 ? 很 简单 ， 在 图 6.19 的 版 本 3.3.1 上 单 击 ， 即 可 
弹出 切换 面板 ,如 图 6.20 所 示 。 这 里 我 们 可 以 选择 最 新 的 版 本 3.3.3333 作为 此 项 目的 TypeScript 
编译 器 。 此 时 ， 会 在 .vscode 中 自动 生成 一 个 settings.json 的 配置 文件 ， 在 这 个 文件 中 还 可 以 对 
当前 项 目 所 使 用 的 字体 、 字 体 大 小 以 及 界面 缩放 比例 进行 配置 。 


kelect the Typescript version used for Javascript and TypeScript language features 


» Use VS Code's Version 3.3.1 


Use Workspace Version 3. 
node_modules\typescript\lib 


Learn More 
图 6.20 TypeScript 版 本 选择 界面 
然后 在 调试 视图 中 单 击 启动 图 标 ， 即 可 启动 项 目 调试 代码 了 。 当 项 目 启动 后 ， 我 们 之 前 设 
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置 的 断 点 起 作用 了 , 程序 运行 到 断 点 处 即 暂停 运行 。 此 时 , 我 们 可 以 查看 变量 的 值 并 通过 调试 
面板 来 进行 各 种 调试 ， 如 图 6.21 所 示 。 


地 File Edit Selection View Go Debug Terminal Help appis -vscode - Visual Studio Code = Xx 
DEBUG 了 启动 交口 | We 四 … 
4 VARIABLES 1 function hello(msg:string){ ~ 
a 2 let ret ="Hello ”+ msg; 一 
» 3 console.log(ret); 
机 -ipt= A 
re 5 hello("typescript"); 


ret: "Hello typescript" 


» Global 


® 


TERMINAL 20. 2: Task - build_ts " 直 略 自信 Xx 


a will be reused by tasks, press any key to close it. 


四 0 全 0 Pb RB (vscode) GitGraph DENSE 


图 6.21 TypeScript 调试 界面 


至 此 ， 使 用 Visual Studio Code 工具 开发 和 调试 TypeScript 的 基本 步骤 就 介绍 完了 ， 可 以 
基于 此 配置 来 构建 更 加 复杂 的 项 目 。 

这 里 需要 提 一 下 ，launch.json 配置 的 启动 主 文件 为 "$ {workspaceRoot}/dist/app.js"， 但 是 我 
们 设置 的 断 点 是 在 app.ts 上 ， 那 么 Visual Studio Code 是 如 何 知道 二 者 的 映射 关系 的 呢 ? 答案 
就 在 .map 文件 上 。 

如 果 把 appjs.map 文件 删除 ， 且 将 tsconfig.json 中 的 sourceMap 设置 为 false， 那 么 我 们 再 
运行 调试 的 时 候 不 会 定位 到 app.ts 上 ， 而 是 定位 到 app.js 上 ， 如 图 6.22 所 示 。 


1s appjs . i 
1 function hello(msg) { 
» 2 var ret = "Hello ”+ msg; 
3 console.log(ret); 
a 
5 hello("typescript"); 
6 


图 6.22 ”JavaScript 调试 界面 


前 面 提 到 的 在 .vscode 文件 中 有 一 个 settings.json 文件 , 这 个 文件 我 们 可 以 配置 针对 本 项 目 
的 特有 个 性 配置 ， 内 容 如 代码 6-8 所 示 。 


【代码 6-8】 settings.json 配置 代码 : settings.json 


01 { 

02 "typescript.tsdk": "node modules\\typescript\\lib", 

03 "editor.formatOnPaste": true, 

04 "editor.fontFamily": "Consolas, '‘'Courier New', monospace", 
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05 "editor .fontSize": 14, 
06 "window.zoomLevel": 2.0 
07 } 


从 代码 6-8 可 以 看 出 , 02 行 typescript.tsdk 属性 指明 了 当前 的 编译 器 SDK 的 路 径 , 是 根 目 
录 下 的 node_modulesNtypescriptNlib 路 径 ， 而 不 是 Visual Studio Code 的 内 置 typescript。 
editor.fontFamily 属性 可 以 配置 编辑 器 使 用 的 字体 ，editor.fontSize 可 以 指定 编辑 器 字体 大 小 ， 
而 window.zoomLevel 可 以 配置 当前 UI 缩放 比例 ， 此 值 越 大 ， 界 面 中 的 元 素 显示 越 大 。 
此 项 目的 文件 目录 结构 如 图 6.23 所 示 。 
4 vscopE 
4 Vscode 
} launchjson 
} settingsjson 
} tasksjson 
4 dist 
15 appjs 
;5 appjs.map 
4 node modules 
» .bin 


» typescript 
4 Src 


{} package-lockjson 
{} packagejson 
{} tsconfig,json 


图 6.23 项 目 文件 结构 


从 图 6.23 可 以 看 出 ,我们 在 src 文件 夹 中 编写 了 appits 文件 ， 经 过 调试 后 会 自动 在 dist 文 
件 夹 中 生成 app.js 及 appjs.map 文件 。 其 中 ，appjs.map 是 调试 app.ts 的 关键 ， 如 果 没 有 此 文 
件 ， 那 么 是 不 能 调试 app.ts 的 ， 这 个 一 定 要 注意 。 


.2 合用 ESLint 


ESLint 是 一 个 语法 规则 和 代码 风格 的 检查 工具 ， 主 要 用 来 发 现代 码 错误 、 统 一 代码 风格 ， 
目前 已 被 广泛 地 应 用 于 各 种 JavaScript 项 目 中 。 它 通过 插件 化 的 特性 极 大 地 丰富 了 适用 范围 ， 
搭配 typescript-eslint-parser 之 后 ， 可 以 用 来 检查 TypeScript 代码 。 

前 面 提 到 ，TypeScript 语言 本 身 就 是 一 种 静态 类 型 的 语言 ， 编 译 器 自 带 语法 检查 功能 ， 会 
对 ts 文件 进行 语法 解析 ， 如 果 遇 到 一 些 语法 错误 ， 或 使 用 了 未 定义 的 变量 ， 就 会 报错 。 那 么 
为 什么 还 需要 ESLint 功能 呢 ? 
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因为 ESLint 工具 除了 对 文件 进行 语法 解析 外 , 更 主要 的 是 可 以 对 一 些 代 码 风格 进行 约束 。 
代码 编程 的 规范 是 很 多 公司 都 有 的 , 而 且 可 能 每 个 公司 都 不 一 样 , 但 是 其 目的 都 是 让 代码 的 书 
写 符合 某 种 既定 的 规范 , 读者 都 应 遵循 它 ， 这 样 代码 在 团队 中 的 协作 效率 就 会 更 好 , 一 个 人 阅 
读 另 一 个 人 的 代码 也 更 加 容易 。 

可 以 说 ，ESLint 工具 和 TypeScript 静态 类 型 检查 既 有 交集 又 有 互补 。 虽 然 发 现代 码 错误 
比 统一 的 代码 风格 更 重要 , 但 是 当 一 个 项 目 越 来 越 庞大 、 开 发 人 员 越 来 越 多 的 时 候 , 代码 风格 
的 约束 还 是 必 不 可 少 的 。 

下 面 我 们 就 来 一 步 一 步 给 上 面 的 TypeScript 项 目 安装 ESLint 工具 进行 语法 检查 。 


6.2.1 安装 ESLint 


ESLint 可 以 安装 在 当前 项 目 或 全 局 环境 下 ， 因 为 代码 检查 是 项 目的 重要 组 成 部 分 ， 所 以 
我 们 一 般 会 将 它 安装 在 当前 项 目 中 。 可 以 运行 下 面 的 脚本 来 安装 : 

npm install eslint --save-dev 

安装 成 功 后 ， 会 显示 添加 成 功 的 信息 ， 如 图 6.24 所 示 。 


PS C:\Src\charpter6\vscode> npm install eslint --save-dev 
npm WARN vscode-typescript@1.6.6 No repository field. 


+ eslint@5.15.1 
added 117 packages in 15.199s 
PS C:\Src\charpter6\vscode> | | 


图 6.24 ”安装 ESLint 依赖 包 界面 
由 于 ESLint 默认 使 用 espree 进行 语法 解析 ， 无 法 识别 TypeScript 的 一 些 语法 ， 因 此 我 们 
还 需要 安装 @typescript-eslint/parser 来 蔡 代 默认 的 解析 器 , 在 Visual Studio Code 的 终端 命令 行 
中 用 如 下 命令 进行 安装 : 
npm install @typescript-eslint/parser --save-dev 
安装 成 功 后 ， 会 显示 添加 成 功 的 信息 ， 如 图 6.25 所 示 。 


PS C:\Sre\chartperé\vscode> npm install @typescript-eslint/parser -~-save-dev 
npm WARN vscode-typescript@1.0.0 No repository field. 


+ Btypescript-eslint/parser@1.4.2 


added 4 packages from 3 contributors and audited 194 packages in 1.72s 
found 8 vulnerabilities 


PS C:\Src\chartper6\vscode> 


6.25 ”安装 @typescript-eslint/parser 依赖 包 界面 


必 却 我 们 也 可 以 安装 typescripteslintparser ， 但 是 它 已 经 过 时 了 ， 官 网 建议 用 
(@typescript-eslint/parser 进行 代替 。 
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为 了 更 好 地 支持 TypeScript， 我 们 再 安装 一 个 插件 @typescript-eslint/eslint-plugin。 在 
Visual Studio Code 的 终端 命令 行 中 用 如 下 命令 进行 安装 : 


npm install @typescript-eslint/eslint-plugin 


安装 成 功 后 会 显示 添加 成 功 的 信息 ， 如 图 6.26 所 示 。 


--save-dev 


PS C:\Src\chartper6\vscode> npm install @typescript-eslint/eslint-plugin --save-dev 
npm WARN vscode-typescriptG@1.9.9 No repository field. 


+ @typescript-eslint/eslint-plugin@1.4.2 
added 3 packages from 2 contributors and audited 216 packages in 1.61s 
found @ vulnerabilities 


PS C:\Src\chartper6\vscode> [| 


6.26 ”安装 @typescript-eslint/eslint-plugin 依赖 包 界面 


通过 上 面 的 npm install 命令 〈--save-dev) ， 会 自动 在 package.json 中 写 入 开发 依赖 包 ， 如 
6.27 所 示 。 在 devDependencies 属性 下 ， 安 装 的 各 个 依赖 包 名 及 其 版 本 一 目 了 然 。 


{} packagejson @ 


pp 


"name": "vscode-typescript", 
"version": "1.6.6"， 
"description": "debug tool"， 
"main": "app.js", 
"scripts": { 

"prebuild ts": "tsc" 
js 
"author": "jackwang", 
"license": "ISC", 
"devDependencies": { 


"@typescript-eslint/eslint-plugin": 
"@typescript-eslint/parser”: "~^1.4.2", 


"eslint": "*5.15.1", 
"typescript": "^3.3.3333" 


"1.4.2", 


6.27 ”packagejson 文件 截图 界面 


需要 注意 的 是 @typescript-eslint/parser 和 (@typescript-eslint/eslint-plugin 必须 使 用 相同 的 版 


本 号 ， 这 一 点 非常 重要 。 


一 如 果 全 局 安装 ESLint (使 用 -g 标志 ) ,就 必须 对 @typescript-eslint/eslint-plugin 依赖 包 进行 


[>” 全 局 安 装 。 


6.2.2 创建 ESLint 配置 文件 
ESLint 工具 需要 一 个 配置 文件 来 决定 对 哪些 规则 进行 检查 ， 配 置 文件 的 名 称 一 般 
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是 .eslintre.js 或 .eslintrc.json。 

当 运 行 ESLint 工具 检查 一 个 文件 的 时 候 ， 它 会 首先 尝试 读 取 根 目录 下 的 配置 文件 ， 然 后 
再 一 级 一 级 往 上 查找 ， 将 所 找到 的 配置 合并 起 来 ， 作 为 当前 被 检查 文件 的 配置 。 

我 们 在 项 目的 根 目录 下 创建 一 个 .eslintre.js， 内 容 如 代码 6-9 所 示 。 


【代码 6-9】 .eslintrcjs 配置 代码 : .eslintrc.js 
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01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
11 
12 
3 
14 
EI 
16 
17 


module.exports = { 

"parser": "@typescript-eslint/parser", 

"plugins": ["@typescript-eslint"], 

// 使 用 类 型 信息 

"parserOptions": { 
"project": "./tsconfig.json" 

}, 

"rules™s 二 
"@typescript-eslint/no-use-before-define": "error", 
"@typescript-eslint/indent": "error", 
"@typescript-eslint/camelcase": "error", 
"@typescript-eslint/class-name-casing": "error", 
"@typescript-eslint/explicit-function-return-type": "warn", 

}, 

// 一 键 开启 所 有 建议 规则 


//"extends": ["plugin:@typescript-eslint/recommended"] 


我 们 也 可 以 一 次 启用 所 有 建议 的 规则 ， 如 代码 第 16 行 中 用 扩展 extends 属性 配置 一 个 插 
件 plugin:@typescript-eslint/recommended 即 可 。 规 则 的 值 有 警告 (warn) 和 报错 (error) 之 分 。 
告 级 别 的 规则 用 黄色 字体 输出 信息 ， 错 误 级 别 的 规则 用 红色 字体 输出 信息 。 

在 上 面 的 配置 中 ， 我 们 指定 了 几 个 规则 : 


@typescript-eslint/no-use-before-define 表示 在 定义 变量 之 前 不 允许 使 用 变量 ， 配 置 为 
错误 级 别 。 

@typescript-eslint/indent 表示 强制 实施 一 致 的 缩 进 ， 配 置 为 错误 级 别 。 
@typescript-eslint/camelcase 表示 实施 camelCase 命名 约定 ， 配 置 为 错误 级 别 。 
@typescript-eslint/class-name-casing 表示 需要 PascalCased 类 和 接口 名 称 , 配置 为 错误 
级 别 。 

@typescript-eslint/explicit-function-return-type 要 求 函 数 和 类 方法 的 显 式 返回 类 型 ， 配 
置 为 警告 级 别 。 


typescript-eslint 支持 的 规则 如 表 6.1 所 示 。 
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表 6.1 typescript-eslint 支持 的 规则 说 明 


[@typescript-eslintno-for-in-arra 
[@typescript-eslintno-inferrable-types 


(@typescript-eslint/no-misused-new 
Qtypescript-eslintno-namespace 


|@typescript-eslintno-non-null-assertion 


名 称 描述 
[Qtypescript-eslintadjacent-overload-signatures 要 求 成 员 重 载 是 连续 的 
[Qtypescript-eslintyarray-type 需要 使 用 任意 TO 或 Array<T>， 用 于 阵列 
|(@typescript-eslint/ban-types 强制 不 使 用 该 类 型 
|(@typescript-eslint/ban-ts-ignore 禁止 使 用 “// @ ts-ignore ”注释 
Wtypescript-eslint/camelcase 实施 camelCase 命名 约定 
Mtypescript-eslint/class-name-casing 需要 PascalCased 类 和 接口 名 称 
|[@typescript-eslint/explicit-function-retum-type 要 求 函 数 和 类 方法 的 显 式 返回 类 型 
@typescript-eslint/explicit-member-accessibility 在 类 属性 和 方法 上 需要 显 式 的 可 访问 性 修饰 符 
|[@typescript-eslint/generic-type-naming 强制 命名 泛 型 类 型 变量 
|@typescript-eslinVindent 实施 一 致 的 缩 进 
[@typescript-eslint/interface-name-prefix 要 求 接口 名 称 以 I 为 前 缀 
(@typescript-eslin/member-delimiter-style 要 求 接口 和 类 型 文字 的 特定 成 员 分 隔 符 样式 
Wtypescript-eslint/member-naming 通过 可 见 性 强制 类 成 员 的 命名 约定 
[Qtypescript-eslintmember-ordering 需要 一 致 的 成 员 声 明 顺 序 
Qtypescript-eslintno-angle-bracket-type-assertion 强制 使 用 as Type 断言 而 不 是 <Type> 断 言 
Qtypescript-eslintno-array-constructor 禁止 通用 Array 构造 函数 创建 数组 ， 如 hew Array(0,1,2) 
[@typescript-eslintno-empty-interface 禁止 声明 空 接口 
Qtypescript-eslintno-explicit-an 禁止 使 用 该 any 类 型 
[Qtypescript-eslintno-extraneous-class 禁止 将 类 用 作 命 名 空间 


禁止 使 用 for.…in 循环 磷 代数 组 

对 于 初始 化 为 数字 、 字 符 串 或 布尔 值 的 变量 或 参数 ， 禁 
止 显 式 类 型 声明 。 

强制 执行 的 有 效 定义 new 和 constructor 

禁止 使 用 自 定义 TypeScript 模块 和 命名 空间 

使 用 ! 后 级 运算 符 ， 禁 止 非 空 断言 


(@typescript-eslint/no-object-literal-type-assertion 上 禁止 对 象 文字 出 现在 类 型 断言 表达 式 中 
|@typescript-eslintno-parameter-properties 禁止 在 类 构造 函数 中 使 用 参数 属性 
(@typescript-eslint/no-require-imports 不 允许 调用 require() 
(@typescript-eslint/no-this-alias 禁止 别名 this 
(@typescript-eslint/no-triple-slash-reference 禁止 /// <reference path="" /> 
[@typescript-eslintno-type-alias 不 允许 使 用 类 型 别名 
|@typescript-eslintno-unnecessary-qualifier 在 不 需要 名 称 空间 限定 符 时 发 出 警告 
[@typescript-eslintno-unnecessary-type-assertion 如 果 类 型 断言 不 改变 表达 式 的 类 型 ， 就 发 出 警告 
[@typescript-eslintno-unused-vars 上 禁止 未 使 用 的 变量 
[Qtypescript-eslintno-use-before-define 在 定义 变量 之 前 不 允许 使 用 变量 
[@typescript-eslintno-useless-constructor 禁止 不 必要 的 构造 函数 
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( 续 表 ) 
名 称 述 
Qtypescript-eslintno-var-requires 禁止 使 用 require 语句 ， 但 在 import 语句 中 除外 
Qtypescript-eslintprefer-function-type 使 用 函数 类 型 而 不 是 带 有 调用 签名 的 接口 


|[@typescript-eslintprefer-interface 首选 类 型 文字 的 接口 声明 (类 型 T={..})) 


需要 使 用 namespace 关键 字 而 不 是 module 关键 字 来 声明 
自 定义 TypeScript 模块 

需要 任何 返回 Promise 的 函数 或 方法 才能 标记 为 异步 
Qtypescript-eslint/restrictplus-operands 添加 两 个 变量 时 ， 操 作 数 必须 是 数字 类 型 或 字符 串 类 型 
(@typescript-eslint/type-annotation-spacing 要 求 类 型 注释 周围 的 间距 一 致 


Qtypescript-eslintprefer-namespace-keyword 


Qtypescript-eslintpromise-function-async 


6.2.3 检查 ts 文件 

在 配置 好 .eslintrcjs 文件 之 后 ， 我 们 来 创建 一 个 名 为 eslint-test.ts 的 文件 ， 看 看 是 否 能 用 
ESLint 工具 去 检查 它 的 语法 规范 。 创 建 一 个 新 文件 eslint-test.ts， 内 容 如 代码 6-10 所 示 。 
【代码 6-10】 eslint-test.ts 代码 : eslint-test.ts 


01 function hello World(msg: string) { 


02 a.go=2; 

03 Var a; 

04 Et 

05 return; 

06 } 

07 else { 

08 

09 eval('console.log("hello")') 
10 let ret "Hello " + msg; 
11 OE me 是 ) 和 

2 console.log ("hello"); 
13 lL 

14 

于 二 

16 console.log (ret) 7 

1 } 


18 hello World("world"); 
然后 执行 以 下 命令 ， 用 eslint 对 代码 进行 语法 检测 : 
./node modules/.bin/eslint .\src\eslint-test.ts 


ESLint 检查 此 文件 的 结果 如 图 6.28 所 示 。 
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PS C:\Src\chartper6\vscode> -/node .bi .\srcveslint-test.ts 


C:\Src\chartper6\vscode\src\eslint-test.ts 


1:1 warning 

-return-type 
1:18 error 
2:5 error 

ine 

error 

18:1 error 
19:8 warning 
12:13 error 
15:1 warning 
19:22 error 


Missing return type on function 


Identifier ‘hello World" is not in camel case 
"a’ Was used before it was defined 


Empty block statement 

Expected indentation of 4 spaces but found 7 

eval can be harmful 

Expected '=: and instead saw ‘==" 

More than 1 blank line not allowed 

Newline required at end of file but not found 


X9 problems (6 errors, 3 warnings) 


2 errors and 1 warning potentially fixable with the 


Gtypescript-eslint/explicit-function 


Erypescript-eslint/camelcase 
人 typescript-eslint/no-use-before-def 


no-empty 
Gtypescript-eslint/indent 
no-eval 

eqeqeq 
no-multiple-empty-lines 
eol-last 


~--fix” option. 


图 6.28 ”ESLint 检查 结果 界面 


我 们 使 用 的 是 .node modules/.bin/eslint， 而 不 是 全 局 的 ESLint 脚本 ， 这 是 因为 代码 检查 


是 项 目的 重要 组 成 部 分 ， 所 以 我 们 一 般 会 将 它 安装 在 当前 项 目 中 。 


可 是 每 次 执行 这 么 长 一 段 脚本 颇 有 不 便 , 我 们 可 以 在 packagejson 中 添加 一 个 script 属性 ， 
并 配置 一 个 ESLint 的 脚本 来 简化 这 个 步骤 ， 如 图 6.29 所 示 。 


全 packagejson x 


{ 


"name": "vscode-typescript", 
"version": "1.0.0", 
"description": "debug tool"， 
"main": "app.js", 

"scripts": 


hor": "jackwang", 
‘ense": "ISC", 


Dependencies": { 


"@typescript-eslint/eslint-plugin": "*1.4.2", 


\@typescript-eslint/parser": "^1.4.2", 


1int": "A5.15.1", 


PROBLEMS OUTPUT DEBU® OLE TERMINAL 


PS CiNsrevchartper6\vscodey[npn run eslint | 四 


> vscode-typescript@1.6.6 eslint C:\Src\chartperé\vscode 
> eslint ./src/eslint-test.ts 


C:\Src\chartper6\vscode\src\eslint-test .ts 


1:1 warning Missing return type on function 


-return-type 


1:10 error 
2:5__ error 


was used before it was defined 


1: powershell 


@typescript-eslint 


Identifier ‘hello_ World' is not in camel case @typescript-eslint 


escript-eslint| 


6.29 eslint 检查 命令 界面 
这 时 只 需要 执行 npm run eslint 即 可 。 上 面 的 只 是 检查 单个 文件 ， 那 么 如 何 对 所 有 文件 进 
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行 检查 呢 ? 下面 就 说 一 下 如 何 检查 整个 项 目的 ts 文件 .我 们 的 项 目 源 文件 一 般 放 在 src 目录 下 ， 
所 以 将 package.json 中 的 ESLint 脚本 改 为 对 一 个 目录 进行 检查 即 可 。 由 于 ESLint 默认 不 会 检 
查 .ts 后 缀 的 文件 ， 因 此 需要 加 上 参数 --ext .ts， 如 图 6.30 所 示 。 

{} packagejson x 


-main*; “app.]s", 
"scripts": { 


"eslint": lint ./src/eslint-test.ts", 


5 

6 

7 "prebuild ts": "tsc", 

8 

9 "eslint : "eslint src --ext .ts" 


16 


图 6.30 ESLint 检查 src 目录 文件 脚本 截图 


此 时 执行 npm run eslint_src 即 会 检查 src 目录 下 的 所 有 .ts 后 缀 的 文件 , 输出 结果 如 图 6.31 
所 示 。 


> vscode-typescript@1.90.0 eslint_src C:\Src\chartperé\vscode 
> eslint src --ext .ts 


C:\Src\chartperé\vscode\src\app.ts 0 
1:1 warning Missing return type on function 
t-function-return-type 
6:1 warning Too many blank lines at the end of file. Max of 1 allowed 


C:\Src\chartper6\vscode\src\eslint-test.ts 四 

1:1 warning Missing return type on function @typescri 
-return-type 

1:10 error Identifier ‘hello_World' is not in camel case @typescri| 


2:5 error "a' Was Used before it was defined @typescri 
ine 

7:16 error Empty block statement no-empty 

16:1 error Expected indentation of 4 spaces but found 7 @typescri 

16:8 warning eval can be harmful no-eval 

12:13 error Expected '===" and instead Saw ‘==" eqeqeq 


图 6.31 ESLint 检 查 sre 目录 文件 结果 
ESLint 的 规则 有 3 种 级 别 : 


@ "off' 或 者 0， 不 启用 这 个 规则 。 
@ "warn" 或 者 1， 出现 问题 会 有 警告 。 
@ "error" 或 者 2， 出 现 问题 会 报错 。 


ESLint 的 规则 细节 请 到 ESLint 官方 网 站 (http://eslint.org/docs/rules〉 查 看 。 


@. 使 用 TsLint 


还 有 一 款 和 ESLint 比较 相似 的 工具 ， 就 是 TSLint。 它 也 是 主要 针对 代码 的 编程 规范 进行 
检查 。 从 名 字 上 看 ，TSLint 应 该 更 加 针对 TypeScript 语法 。 
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6.3.1 安装 TSLint 工 具 
用 命令 行 npm install tslint --save-dev 进行 安装 : 
npm install tslint --save-dev 


安装 成 功 后 会 显示 安装 的 TSLint 版 本 等 信息 ， 如 此 处 安装 的 是 tslint@5.14.0， 如 图 6.32 
所 示 。 


PS C:\Src\chartperé\vscode> npm install tslint --save-dev 
npm WARN vscode-typescript6@1.9.6 No repository field. 


+ tslint@5.14.6 
added 16 packages from 7 contributors and audited 262 packages in 2.467s 
found @ vulnerabilities 


PS C:\Src\chartper6é\vscode> | | 


图 6.32 TSLint 安装 结果 


TSLint 是 一 种 可 扩展 的 静态 分 析 工 具 ， 可 检查 TypeScript 代码 的 可 读 性 、 可 维护 性 和 功 
能 性 错误 。 它 在 现代 编辑 器 和 构建 系统 中 得 到 广泛 支持 ， 可 以 使 用 我 们 自己 定义 的 lint 规则 、 
配置 和 格式 化 程序 进行 自 定义 。 

TSLint 具有 以 下 特点 : 

内 置 一 套 广 泛 使 用 的 核心 规则 。 

支持 自 定义 lint 规 则 。 

自 定义 格式 化 代码 。 

内 联 禁 用 和 启用 带 有 源 代码 中 的 注释 标志 的 规则 。 
插件 支持 (如 tslint-react) 。 

与 Visual Studio Code、WebStorm、Eclipse 等 集成 。 


6.3.2 创建 TSLint 配置 文件 


在 Visual Studio Code 终端 命令 行 中 用 命令 ./node_modules/.bin/tslint --init 初始 化 一 个 
tslint.json 文件 。 此 文件 自动 在 项 目 根 目录 下 创建 ， 内 容 如 代码 6-11 所 示 。 


【代码 6-11】 tslintjson 代码 : tslintjson 


01 { 

02 "defaultSeverity": "error", 

03 "extends"s [ 

04 "tslint:recommended" 

05 ], 

06 aRuleans {yy 

07 "yes 

08 "no-unused-expression": true, 
09 "no-string-throw": true, 
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10 "no-duplicate-variable": true, 


11 //for if do while 要 有 括号 
下 有 "ourly”s trvuer 

了 "class-name": true, 
14 "semicolon": [ 

15 true, 

16 "always" 

Ely; ], 

18 // === 

19 "triple-equals": true 
20 }, 

全 3 "rulesDirectory": [] 

22 } 


在 tslintjson 配置 文件 中 ，rulesDirectory 指定 规则 的 实现 目录 ， 可 以 配置 多 个 。extends 指 
定 我 们 继承 的 配置 ， 这 里 继承 tslint:recommended 来 启用 推荐 的 检验 规则 。 另 外 ， 我 们 可 以 在 
rules 中 添加 配置 ， 它 能 覆盖 继承 所 提供 的 配置 。 


6.3.3 检查 ts 文件 
要 用 TSLint 检测 代码 ， 需 要 在 Visual Studio Code 命令 行 终端 执行 命令 : 


./node modules/ .bin/tslint .\src\eslint-test.ts 


对 文件 eslint-test.ts 进行 语法 检测 ， 检 测 的 结果 如 图 6.33 所 示 。 
PS C:\srec\chartper6\vscode> ode_mo s/,bin/tslint .\src\eslint-test.ts 


: src/eslint-test.ts:2:9 - missing whitespace 
src/eslint-test.ts:2:10 - missing whitespace 
: src/eslint-test. 5 - Forbidden ‘var' keyword, use 'let' or ‘const' instead 
: src/eslint-test.ts:3:9 - Identifier ‘a' is never reassigned; Use 'const' instead of “ 


: src/eslint-test.ts:7:5 - misplaced 'else' 
: src/eslint-test. 10 - block is empty 
: src/eslint-test. - forbidden eval 


: src/eslint-test.ts:18:8 - statements are not aligned 
: src/eslint-test.ts:19:36 - Missing semicolon 
: src/eslint-test.ts:11:9 - Identifier 'ret' is never reassigned; Use 'const' instead of ' 


: src/eslint-test.ts:12:13 - == should be === 

: src/eslint-test.ts:13:9 - Calls to 'console.log' are not allowed. 
: src/eslint-test.ts: - trailing whitespace 

: src/eslint-test.ts: ~ Consecutive blank lines are forbidden 

: src/eslint-test.ts: - Calls to 'console.1og' are not allowed. 
: src/eslint-test.ts:19:22 - file should end with a newline 


6.33 TSLint 检测 结果 截图 
TSLint 常用 规则 如 表 6.2 所 示 。 
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表 6.2 TSLint 规 则 


属性 /方法 说 明 

no-parameter-properties 禁止 给 类 的 构造 函数 的 参数 添加 修饰 符 

no-debugger 禁止 使 用 debugger 

no-trailing-whitespace 禁止 行 尾 有 空格 

no-unused-expression 禁止 无 用 的 表达 式 

no-unused-variable 定义 过 的 变量 必须 使 用 

no-use-before-declare 变量 必须 先 定 义 后 使 用 

no-var-keyword 禁止 使 用 var 

triple-equals 必须 使 用 一 = 或 ! 一 ， 禁 止 使 用 一 或 !=， 与 null 比较 时 除外 
member-ordering 指定 类 成 员 的 排序 规则 

no-this-assignment 禁止 将 this 赋值 给 其 他 变量 ， 除 非 是 解构 赋值 

no-empt 禁止 出 现 空 代码 块 ， 允 许 _ catch 是 空 代码 块 
no-unnecessary-type-assertion 禁止 无 用 的 类 型 断言 

return-undefined 使 用 “return;” 而 不 是 “retum undefined;” 

no-for-in-arra. 禁止 对 array 使 用 for...in 循环 
adjacent-overload-signatures 定义 函数 时 如 果 用 到 了 覆 写 ， 就 必须 将 覆 写 的 函数 写 到 一 起 
no-parameter-reassignment 禁止 对 函数 的 参数 重新 赋值 


让 后 面 必须 有 { 

for...in 内 部 必须 有 hasOwnProperty 

禁止 在 分 支 条 件 判断 中 有 赋值 操作 

禁止 使 用 new 来 生成 String、Number 或 Boolean 
禁止 super 在 一 个 构造 函数 中 出 现 两 次 

禁止 在 switch 语句 中 出 现 重复 测试 表达 式 的 case 
禁止 出 现 重复 的 变量 定义 或 函数 参数 名 


no-eval 禁止 使 用 eval 

no-object-literal-type-assertion 禁止 对 对 象 字 面 量 进行 类 型 断言 (断言 成 any 是 允许 的 ) 
no-return-await 禁止 没 必要 的 _retum await 

no-sparse-arrays 禁止 在 数组 中 出 现 连续 的 逗号 ， 如 let foo =[,,] 
no-string-throw 禁止 throw 字符 串 ， 必 须 throw 一 个 Error 对 象 
no-switch-case-fall-through switch 的 case 必须 用 return 或 break 语句 返回 
no-unbound-method 使 用 实例 的 方法 时 ， 必 须 绑 定 到 实例 上 

Use-isnan 必须 使 用 isNaN(foo) 而 不 是 foo 一 = NaN 

Tadix parseInt 必须 传 入 第 二 个 参数 

deprecation 禁止 使 用 废弃 〈 被 标识 了 _@deprecated) 的 API 
indent 一 个 缩 进 的 配置 

no-duplicate-imports 禁止 出 现 重复 的 import 

no-mergeable-namespace 禁止 一 个 文件 中 出 现 多 个 相同 的 namespace 

encoding 文件 类 型 必须 是 utf-8 

import-spacing 在 import 语句 中 ， 关 键 字 之 间 的 间距 必须 是 一 个 空格 
interface-over-type-literal 接口 可 以 implement extend 和 merge 
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( 续 表 ) 


属性 /方法 


说 明 


new-parens 


使 用 new 关键 字 调 用 构造 函数 时 需要 括号 


no-angle-bracket-type-assertion 类 型 断言 必须 使 用 as Type， 禁 止 使 用 <Type> 


no-consecutive-blank-lines 禁止 连续 出 现 几 行 空 行 ， 几 行 可 配 


no-iregular-whitespace 禁止 使 用 特殊 空白 符 〈 比 如 全 角 空格 ) 


no-redundant-jsdoc 禁止 使 用 JSDoc， 因 为 TypeScript 已 经 包含 了 大 部 分 功能 


no-reference-import 


禁止 使 用 三 斜 杠 引入 类 型 定义 文件 


禁止 变量 定义 时 赋值 为 undefined 


no-unnecessary-initializer 


小 数 必 须 以 0. 开头， 禁止 以 . 开头 ， 并 且 不 能 以 0 结尾 


number-literal-format 
one-variable-per-declaration 变量 声明 必须 每 行 一 个 ，for 循环 的 初始 条 件 中 除外 


quotemark 


if 后 的 { 禁止 换行 
"quotemark": [ 

true, 

"single", 
"jsx-double", 
"avoid-template", 
"avoid-escape" 


] 必 须 使 用 单 引 号 ，jsx 中 必须 使 用 双 引 号 


|semicolon | 行 尾 必须 有 分 号 
函数 名 前 必须 有 空格 


space-within-parens 括号 内 首尾 禁止 有 空格 


这 里 不 再 袭 述 。 
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no-unsafe-finally 


禁止 finally 内 出 现 retum、continue、break、throw 等 , finally 会 比 catch 
先 执行 


我 们 可 以 将 这 些 规则 根据 实际 需求 添加 到 tsconfig.json 中 的 rules 属性 下 。 需 要 注意 
的 是 ， 有 些 规则 除了 可 以 用 true 或 者 false 配置 外 ， 还 可 以 配置 排除 项 或 其 他 额外 配置 ， 


使 用 Jest 


一 般 我 们 不 管 是 做 前 端 还 是 后 端 ， 为 了 提高 代码 的 质量 ， 都 会 选择 一 种 测试 驱动 开发 
(TDD) 的 办 法 来 对 代码 进行 单元 测试 。Jest 是 Facebook 团队 开发 的 一 款 测试 框架 ， 可 以 提 
高 开发 者 的 “测试 体验 ”。 

我 们 做 单元 测试 的 时 候 需要 分 解 出 一 个 个 独立 的 模块 , 但 是 这 样 做 要 写 很 多 的 mock 代码 
(模拟 的 辅助 函数 )， 这 个 过 程 非常 烦琐 。 这 是 编写 测试 用 例 的 一 个 “ 痛 点 ”。 如 果 我 们 不 想 
编写 大 量 的 辅助 代码 来 测试 ， 那 么 Jest 测试 框架 就 是 很 好 的 一 种 选择 。 
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如 果 你 用 过 一 些 其 他 测试 框架 ， 比 如 Mocha 和 Jasmine， 那 么 看 一 下 Jest 文档 应 该 会 比较 
容易 上 手 。 
Jest 测试 框架 的 特征 有 : 
性 能 非常 好 ， 快 速 响应 。 
用 法 非常 简单 ， 几 分 钟 快 速 上 手 。 
容易 安装 和 运行 ， 无 须 任何 配置 。 
自 带 履 盖 率 统计 工具 。 
可 以 在 沙 盒 环 境 运行 。 
自动 监测 你 的 代码 变动 并 运行 测试 。 
自动 mock 函数 。 
其 他 测试 框架 都 没有 的 快照 (snapshot ) 测试 。 
测试 异步 代码 非常 简单 。 
Vue、Angular 和 React 框架 等 都 能 用 。 


6.4.1 安装 Jest 

在 Visual Studio Code 命令 行 终端 中 执行 命令 : 

i ee 

此 命令 可 以 从 网 站 上 自动 下 载 jest 安装 包 ， 并 在 packagejson 文件 中 进行 配置 依赖 信息 。 
安装 的 结果 如 图 6.34 所 示 。 


PS C:\Src\chartper6\vscode> npm install jest --save-dev 
npm WARN vscode-typescript6@1.6.6 No repository field. 


+ jest624.5.6 


added 413 packages from 367 contributors and audited 476925 packages in 29.866s 
found 8 vulnerabilities 


PS C:\SrcNchartper6\vscode> 


图 6.34 Jest 安装 截图 


6.4.2 Jest 初始 化 配置 


在 Visual Studio Code 终端 命令 行 中 ， 输 入 ./node_modules/.bin/jest --init 初始 化 配置 文件 。 
这 里 需要 注意 的 是 ， 当 回 车 执行 这 些 命令 的 时 候 , 会 有 一 个 配置 询问 过 程 ， 根 据 这 个 过 程 设 置 
一 些 参 数 即 可 。 

在 选择 测试 环境 的 时 候 ， 用 键盘 上 的 上 下 箭头 来 选择 ， 这 里 选择 node 作为 测试 环境 。 初 
始 化 配置 的 界面 如 图 6.35 所 示 。 
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PS C:\Srcvchartper6\vscodey ./node_modules/ .bin/jest --init 


The _ following questions wil] help Jest to create a suitable configuration for your project 


Would you like to use Jest when running "test" script in "package,json"? ... yes 
? Choose the test environment that will be used for testing » - Use arrow-keys. Return to submi 
Choose the test environment that will be used for testing » - Use arrow-keys. Return to submi 
? Choose the test environment that will be used for testing » - Use arrow-keys. Return to submi 
Choose the test environment that will be used for testing » node 
Do you want Jest to add coverage reports? ... yes 
Automatically clear mock calls and instances between every test? ... yes 


LiP Modified Cc:\src\chartper6\vscode\package.json 


© configuration file created at Cc:\src\chartperé\vscode\jest.config.js 
PS_C:\SrcNvchartper6\Vscodey 


6.35 Jest 初始 化 


在 这 个 过 程 中 ,会 在 packagejson 中 写 入 脚本 内 容 ， 对 应 scripts 节点 的 test 脚本 块 ， 如 图 
6.36 所 示 。 


{) packagejson x 


1 1 

2 ”name": "vscode-typescript", 

3 "version": "1.0.0", 

4 "description": "debug tcol"， 

3 "main": "app.j 

6 "scripts": { 

rs "prebuild_ts": "tsc", 

8 "eslint": "eslint ./src/eslint-test.ts", 
- 

16 

11 ), 

12 "author": "jackwang", 

13 "license": "ISC", 

14 "devDependencies": { 

15 "@typescript-eslint/eslint-plugin": "^1.4.2", 
16 "@typescript-eslint/parser": "^1.4.2", 


图 6.36 ”package.json 内 容 截图 


6.4.3 Jest 测试 


(1) 测试 代码 的 时 候 , 需要 先 有 一 个 测试 对 象 。 这 里 为 了 方便 测试 , 编写 一 个 TypeScript 
函数 。 在 src 文件 夹 里 面 新 建 一 个 sum.ts 文件 ， 内 容 如 代码 6-12 所 示 。 


【代码 6-12】 sum.ts 代码 : sum.ts 


01 function sum(a: number, b: number) { 
02 returna+b; 

03 } 

04 module.exports = sum; 


sumis 中 04 行 用 module.exports-sum 将 该 函数 进行 导出 ， 否 则 可 能 无 法 找到 该 函数 ， 出 
| 现 函 数 未 定义 的 错误 。 
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(2) 在 根 目录 下 新 建 一 个 test 文件 夹 ， 在 test 文件 里 面 新 建 一 个 sum.testjs 文件 。 注 意 ， 
名 字 要 带 有 test。sum.test.js 文件 内 容 如 代码 6-13 所 示 。 


【代码 6-13】 sum.testjs 代码 : sum.testjs 


01 
02 
03 
04 
05 


const sum = require('./../dist/sum'); 


test('hellojest', () => { 
let ret = sum(1，2) 7 
expect (ret) .toBe (3) 


]) 7 


在 代码 6-13 中 ，01 行 用 require 引入 了 刚才 定义 的 sum 文件 ， 但 是 要 注意 ， 这 里 引入 的 
是 dist 文件 夹 中 的 sumjs， 而 不 是 对 应 的 src 文件 夹 中 的 sum.ts。 因 此 ， 在 测试 之 前 ， 需 要 先 
用 tsc 命令 将 typescript 转 成 javascript， 然 后 调用 npm run test 进行 测试 。 测 试 结果 如 图 6.37 


所 示 。 


PS C:\Src\chartper6\vscode> t 


PS C:\Src\chartperé\vVscode> Npm 


> vscode-typescript@1.80.8 test C:\Src\chartper6\vscode 


> jest 


PASS test/Sum,test,js 


V hellojest (3ms) 


Test Suites: 1 passed, 1 total 


Tests: 1 passed, 1 total 
Snapshots: 8 total 
Time; 1.377s 


Ran all test suites. 
PS C:\Src\chartper6\vscode> [| 


run test 


6.37 jest 测试 截图 


关于 Jest 的 具体 使 用 ， 可 以 参考 官网 https://jestis.io。 官 网 上 有 大 量 的 实际 例子 可 供 参 考 
和 学 习 。 在 编写 测试 时 , 通常 需要 检查 值 是 否 符 合 某 些 条 件 。expect 可 以 访问 许多 “匹配 器 ”， 
以 便 我 们 验证 不 同 的 内 容 。 对 于 由 Jest 社区 维护 的 其 他 Jest 匹配 器 ， 可 查看 jest-extended， 地 
址 为 https://github.com/jest-community/jest-extended。 

图 6.37 可 以 看 出 ， 需 要 手动 执行 两 个 命令 ， 比 较 烦 琐 。 那 么 能 不 能 在 启动 程序 的 时 候 先 
进行 编译 再 调用 测试 呢 ? 换 句 话说 ， 就 是 调用 两 个 命令 〈 可 以 称 为 组 合 命令 )》。tasksjson 文 
件 中 组 合 任务 可 以 用 dependsOn 来 定义 。 

为 了 达到 这 个 目的 ， 我 们 修改 launch.json 启动 配置 文件 中 的 preLaunchTask 属性 为 
ts_test_build， 如 图 6.38 所 示 。ts_test_build 是 tasks.json 定义 的 复合 任务 标签 名 。tasks.json 内 
容 如 代码 6-14 所 示 。 
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{} launchjson x 


8 "program ${workspaceRoot}/dist/app.js", 
9 "stopOnEntry": false, 

16 "cwd": "${workspaceRoot}", 
11 

12 

13 

14 "NODE_ENV": "development" 
15 }, 

16 "console": "internalConsole"， 
17 "sourceMaps": true 

18 } 

19 ] 

20 }) 


6.38 ”launch.json preLaunchTask 配置 截图 


【代码 6-14】 tasks.json 代码 : tasks.json 


01 { 

02 "version": "2.0.0", 

03 "tasks": [{ 

04 "type": "npm", 

05 "script": "prebuild ts", 
06 "label"; "build ts" 

07 ye 

08 "type": "npm", 

09 和 

10 "label": "test ts" 

1 Py 

2 "label": "ts test build", 
3 "dependson": ["build ts", "test ts"] 
14 } 

ls ] 

16 


其 中 ，dependsOn 值 为 数组 ,可 以 传 入 自 定义 的 label 值 ， 如 build_ts 是 06 行 定义 的 标签; 
而 test_ts 是 10 行 定义 的 标签 。 此 时 , 我 们 就 可 以 在 Visual Studio Code 中 直接 启动 程序 进行 编 
译 和 测试 了 ， 如 图 6.39 所 示 。 
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| Fle Edit Selection View Go Debug Terminal Help appits - vscode - Visual Studio Code [Administrator] ee 口 x | 
了 i nm: 
要 Pon 1 
» 2 
六 3 
yf ER 4 
» Global aLEMs 和 3 Task- test ts "中 加 会 入 X 
口 Terminal will be reuset d by tasks, press any key to close i1t. 


> vscode-typescript@1.9.9 test C:\Src\chartper6\vscode 
jest 


2 en se mnoneioonr MI test/sun.test.js 
hellojest (3ms 


hello appis 214 

a ) Test Suites: 1 ed, 1 total 
Tests: 1 passed, 1 total 
Snapshots: 。 @ total 


Time: 1.187s, estimated 2s 


oroeo scurrs 


Terminal will be reuset d by tasks, press any key to close 1t. 
4 BREAKPOINTS 


© 0 A025 bE wcode) tn2,Col14 Spoces4 UTF8 CRIF Typesaipt 331 因 刍 


图 6.39 启动 调试 并 测试 


使 用 webpack 


webpack 可 以 看 作 模 块 打包 器 ， 用 于 分 析 项 目 结构 ， 找 到 JavaScript 模块 以 及 其 他 的 一 些 
浏览 器 不 能 直接 运行 的 扩展 语言 (如 SCSS、TypeScript 等 ) 并 将 其 打包 为 合适 的 格式 以 供 浏 
览 器 使 用 。webpack 官网 地 址 为 https://www.webpackjs.com。 

如 今 很 多 Web 应 用 的 功能 都 比较 复杂 ， 项 目 文件 拥有 复杂 的 JavaScript 代码 和 一 大 堆 依 
赖 包 ,为 了 简化 开发 的 复杂 度 , 前端 社区 涌现 出 了 很 多 好 的 实践 方法 ,如 分 模块 开发 。TypeScript 
语言 的 出 现 也 是 基于 这 样 的 大 背景 ， 它 诞生 的 目标 就 是 构建 大 型 可 扩展 的 Web 应 用 。 在 
webpack 官网 首页 上 有 一 张 图 ( 见 图 6.40) ， 可 以 很 好 地 说 明 webpack 的 用 途 。 


图 6.40 webpack 用 途 示意 图 (来 自 官网 ) 
本 质 上 ，webpack 是 一 个 现代 JavaScript 应 用 程序 的 静态 模块 打包 器 。 当 webpack 处 理应 
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用 程序 时 ， 它 会 递归 地 构建 一 个 依赖 关系 图 , 其 中 包含 应 用 程序 需要 的 每 个 模块 ,然后 将 所 有 
这 些 模块 打包 成 一 个 或 多 个 包 (bundle) 。 

从 webpack v4.0.0 开始 ， 可 以 不 引入 配置 文件 。 然而，webpack 仍然 是 高 度 可 配置 的 。 在 
开始 前 需要 理解 4 个 核心 概念 : 


®© 入 DCentry) 


入 口 起 点 〈entry point) 指定 webpack 应 该 从 哪个 文件 开始 运行 ， 以 作为 构建 其 内 部 依赖 
图 的 开始 。 进 入 入 口 起 点 后 ，webpack 会 找 出 有 哪些 模块 和 库 是 入 口 起 点 〈 直 接 和 间接 ) 依赖 
的 。 

每 个 依赖 项 随即 被 处 理 ， 最 后 输出 到 称 为 bundles 的 文件 中 。 可 以 通过 在 webpack 配置 中 
配置 entry 属性 来 指定 一 个 入 口 起 点 (或 多 个 入 口 起 点 ) ， 默 认 值 为 .src。 


@ 输出 (output) 


output 属性 告诉 webpack 在 什么 地 方 (文件 目录 ) 将 打包 好 的 文件 输出 ， 同 时 可 以 配置 命 
名 这 些 文件 的 方式 , 默认 值 为 /dist。 基本 上 ， 整 个 应 用 程序 结构 都 会 被 编译 到 你 指定 的 输出 路 
径 的 文件 夹 中 。 我 们 可 以 通过 在 配置 中 指定 一 个 output 属性 来 配置 这 些 处 理 过 程 。 


@ 加载 器 (loader) 


loader 是 一 个 加 载 器 ， 由 于 webpack 自身 只 理解 JavaScript 语义 ， 无 法 解析 其 他 类 型 的 文 
件 ， 如 SCSS 等 ， 因 此 为 了 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文件 ， 需 要 用 加 载 器 对 文 
件 进行 预 处 理 。loader 可 以 将 所 有 类 型 的 文件 转换 为 webpack 能 够 处 理 的 有 效 模块 ， 然 后 就 可 
以 利用 webpack 的 打包 能 力 对 它们 进行 处 理 了 。 

从 本 质 上 说 ，webpack loader 可 将 所 有 类 型 的 文件 转换 为 应 用 程序 的 依赖 图 可 以 直接 引用 
的 模块 。 


| loader 能 够 导入 任何 类 型 的 模块 (例如 .css 文件 ) 。 这 是 webpack 特有 的 功能 ， 其 他 打包 
Ee 程序 或 任务 执行 器 可 能 并 不 支持 。 这 种 语言 扩展 是 很 有 必要 的 , 因为 这 可 以 使 开发 人 员 创 
| 建 出 更 准确 的 依赖 关系 图 。 


从 更 高 层面 上 来 说 ， 在 webpack 的 配置 中 loader 有 两 个 属性 : test 属性 和 use 属性 。 前 者 
用 于 表示 应 该 被 对 应 的 loader 进行 转换 的 某 个 或 某 些 文件 。 后 者 表示 进行 转换 时 , 应 该 使 用 哪 


个 loader。 
@ 插件 (plugins ) 


加 载 器 被 用 于 转换 某 些 类 型 的 模块 ,而 插件 则 可 以 用 于 执行 范围 更 广 的 任务 。 揪 件 的 范围 
包括 : 打包 优化 、 压 缩 ， 一 直到 重新 定义 环境 中 的 变量 。 插 件 接口 功能 极其 强大 ， 可 以 用 来 处 
理 各 种 各 样 的 任务 。 

想 要 使 用 一 个 插件 ,我们 只 需要 用 require() 引 入 它 即 可 ,然后 将 其 添加 到 plugins 数组 中 。 
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多 数 插件 可 以 通过 选项 (option〉 自 定义 。 我 们 也 可 以 在 一 个 配置 文件 中 因 不 同 目的 而 多 次 使 
用 同一 个 插件 ， 这 时 需要 通过 使 用 new 操作 符 来 创建 它 的 一 个 实例 。 

通过 选择 development 或 production 中 的 一 个 来 设置 mode 参数 。development 模式 一 般 打 
包 文件 时 会 保留 一 些 注释 信息 等 ， 而 production 会 删除 注释 ， 同 时 对 代码 进行 压缩 和 混淆 ， 从 
而 减少 文件 的 大 小 、 增 加 代码 被 破解 的 难度 。 

下 面 让 我 们 逐步 搭建 webpack 打包 环境 。 


6.5.1 安装 webpack 


webpack 可 以 使 用 npm 命令 安装 。 在 Visual Studio Code 终端 命令 行 中 输入 npm install 
--save-dev webpack 并 执行 命令 npm install -D webpack-cli 进行 安装 。 安 装 完成 后 显示 信息 如 
6.41 所 示 。 这 里 安装 的 版 本 是 webpack@4.29.6。 


PS C:\src\chartper6\vscode> np install --save-dev webpack 

npm WARN vscode-typescript@1.0.0 No repository field. 

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules 
\fsevents): 

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fseve 
nts@1.2.7; wanted {"0s":"darwin","arch":"any"} (current: {"0s":"win32","arch 
":"x64"}) 


+ webpack@4.29.6 

added 157 packages from 184 contributors and audited 481101 packages in 28.5 
26s 

found 8 vulnerabilities 


ps C:\Src\chartper6\vscode> 四 


6.41 webpack 安装 界面 


各 webpack4 需要 安装 webpack-cli 模块 。 | 


为 了 使 用 webpack 处 理 typescript， 还 需要 一 个 加 载 器 ts-loader。 在 Visual Studio Code 
终端 命令 行 中 输入 命令 “npm install ts-loader --save-dev” 来 安装 ts-loader 工具 。 

我 们 打包 的 JavaScript 文件 最 终 是 要 被 引入 到 html 页 面 中 的 。 在 dist 文件 中 ， 新 建 一 个 
index.html 文件 ， 在 里 面 输入 html， 然 后 会 有 代码 提示 面板 弹出 ,我 们 可 以 选中 html:5 来 快速 
生成 html 代码 ， 如 图 6.42 所 示 。 


indexhtml © 


<1DOCTYPE html> 
日 chtml lange"en"> 
日 cheady 

<meta charset="UTF-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Document</title> 
</head> 
<body> 


</body> 
</html> 


6.42 html:5 默认 生成 的 代码 界面 
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我 们 对 自动 生成 的 index.html 代码 进行 修改 ， 具 体内 容 如 代码 6-15 所 示 。 
【代码 6-15】 index.html 代码 : index.html 


01 <!DOCTYPE html> 


02 <html lang="en"> 


03 <head> 

04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>webpack demo</title> 


08 </head> 


09 <body> 

10 <div id='root'> 

二 </div> 

之 <script src="bundle.js"></script> 


EE </body> 

14 </html> 

在 src 目录 下 修改 app.ts 的 内 容 ， 如 代码 6-16 所 示 。 
【代码 6-16】 app.ts 代码 : app.ts 

01 let sum2 = require("./sum"); 

02 let ret = sum2(1, 2); 


03 document .getElementById ("root") .innerHTML = "sum(1,2)=" + ret; 


04 function hello (msg: string) { 


05 let ret = "Hello " + msg; 
06 console.log (ret); 
07 } 


08 hello("typescript"); 
在 Visual Studio Code 终端 命令 行 中 输入 以 下 命令 : 
./node modules/.bin/.webpack .\dist\app.js -o .\dist\bundle.js 


对 dist 文件 夹 中 的 app.js 进行 文件 打包 ， 并 输出 到 dist 文件 夹 中 的 bundle.js。 打 包 命 令 执 
行 结果 如 图 6.43 所 示 。 
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PS C:\SsrcNvchartper6\vscodey ./n d -bin/webpack .\dist\app-jis -o .\dist\bun 
dle.js 
Hash: 3c319ebc4f6ec5bacaca 
Version: webpack 4.29.6 
Time: 91ms 
Built at: 2919-63-15 13:59:;27 
Asset Size Chunks Chunk Names 
bundle.js 974 bytes @ [emitted] main 
Entrypoint main = bundle.js 


[e] ./dist/app.js 133 bytes {6} [built] 


图 6.43 ”webpack 打包 界面 


当 我 们 成 功 打 包 好 之 后 ,用 浏览 器 打开 dist 中 的 index.html 即 可 看 到 结果 ,如 图 6.44 所 示 。 


D webpack demo x + ee = 
» CGC © 文件 | CG/Src/charpter6/vscode/dist/index.html 上 妇 加 
sum(1,2)=3 


图 6.44 webpack 打包 界面 


6.5.2 配置 webpack.config.js 


上 面 用 webpack 命令 将 文件 进行 了 打包 ，webpack 还 有 一 个 配置 文件 ,可 以 对 很 多 高 级 功 
能 进行 个 性 化 定制 ， 使 其 更 加 强大 和 高 效 。webpack 配置 文件 其 实 也 是 一 个 JavaScript 模块 文 
件 。 我 们 可 以 把 所 有 的 与 打包 相关 的 信息 放 在 配置 文件 中 。 

在 项 目 根 目录 下 新 建 一 个 名 为 webpack.configjs 的 文件 ， 并 在 其 中 写 入 如 代码 6-17 所 示 
的 配置 代码 。 


【代码 6-17】 webpack 打包 配置 代码 : webpack.configjs 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


module.exports = { 
mode: "development", 
entry: './src/app.ts', 
output: { 
filename: 'bundle.js', 
path: _ dirname + "/dist" 
ne 
module: { 
rules: [{ 
test: /\.ts$/, 
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1 
2 
14 
15 
16 
Eg 
18 
19 


Use: "ts=loader”" 
| 
}, 
resolve: { 
extensions: [ 
ee 


] 


上 


在 代码 6-17 中 ， 目 前 的 配置 主要 涉及 以 下 几 点 : 


mode: 打包 模式 ， 有 development 和 production 两 个 选项 。production 会 将 代码 进行 
压缩 和 移 除 注释 等 操作 ; 而 development 不 会 移 除 注释 ， 也 不 会 混 消 代码 。 

entry: 表示 打包 入 口 文件 ， 这 里 是 src 文件 夹 下 的 app.ts。 

output: 表示 打包 后 的 输出 文件 ， 其 中 filename 表示 打包 的 文件 名 ， 还 可 以 用 
[name].min.js 或 者 [name]-[hash].js 来 表示 。path 表示 文件 输出 路 径 ， 这 里 是 根 目 录 下 
的 dist 文 件 夹 。 

module: 表示 模块 解析 配置 ，rules 是 module 的 属性 ， 指 定 模块 解析 规则 ， 而 use 是 
每 一 个 rule 的 属性 ， 指 定 要 用 哪个 loader 进行 处 理 ， 这 里 用 ts-loader 进行 处 理 。 
resolve: 配置 webpack 如 何 寻找 模块 所 对 应 的 文件 。webpack 内 置 JavaScript 模块 化 
语法 解析 功能 ， 默认 会 采用 模块 化 标准 里 约定 好 的 规则 去 寻找 , 但 我 们 也 可 以 根据 自 
己 的 需要 修改 默认 的 规则 。extensions 是 resolve 的 属性 , 可 以 配置 在 导入 语句 没 带 文 
件 后 组 时 让 webpack 自动 带 上 后 级 后 去 尝试 访问 文件 是 否 存 在 。resolve.extensions 
用 于 配置 在 尝试 过 程 中 用 到 的 后 缓 列表 ， 默 认 是 extensions: [js', 'json']。 也 就 是 说 ， 
当 遇 到 require('./sum') 这 样 的 导入 语句 时 ,webpack 会 先 去 寻找 ./sum.js 文件 , 该 文件 
不 存在 时 才 去 寻找 ./sum.json 文件 , 如 果 还 是 找 不 到 就 报错 , 这 里 配置 的 是 extensions: 
[.ts]， 表 示 优 先 寻 找 .ts 文件。 


蝇 _dimame 是 nodejs 中 的 一 个 全 局 变量 ， 指 向 当前 执行 脚本 所 在 的 目录 。 | 


有 了 这 个 配置 文件 webpack.config.js 之 后 ， 再 打包 文件 ， 只 需 在 Visual Studio Code 终端 
里 运行 node_modules/.bin/webpack 命令 就 可 以 对 项 目 文件 进行 打包 了 ， 这 条 命令 会 自动 引用 
webpack.config.js 文件 中 的 配置 选项 。 

在 命令 行 中 输入 命令 时 需要 同时 输入 类 似 于 node_modules/.bin/webpack 的 路 径 是 比较 烦 
人 的 ,不 过 值得 庆幸 的 是 npm 可 以 引导 任务 执行 。 对 npm 进行 配置 后 可 以 在 命令 行 中 使 用 简 
单 的 npm webpack src〈 自 定义 名 称 ) 命令 来 蔡 代 上 面 略微 烦琐 的 命令 。 

在 package.json 中 对 scripts 节点 进行 相关 设置 即 可 。 我 们 添加 了 webpack_src 命令 ， 且 这 
个 属性 的 值 为 webpack， 代 表 真 正 要 执行 的 命令 。packagejson 配置 如 代码 6-18 所 示 。 


200 


【代码 6-18】 packagejson 配置 代码 : packagejson 


01 Et 

02 "name": "vscode-typescript", 

03 生生 

04 "description": "debug tool", 

05 Wm pp ja 

06 nariptors 

07 "prebuild ts": "tsc", 

08 "eslint": "eslint ./src/eslint-test.ts", 
09 "eslint Srcn: "eslint src 一 -ezt .ts", 

10 "test": "jest"s 

时 "webpack app": "webpack ./dist/app.js -o ./dist/bundle.js", 
12 "webpack_ src": "webpack" 

1 }, 

14 "author": "jackwang", 

115 "license": "ISC", 

16 "devDependencies": { 

六 "@typescript-eslint/eslint-plugin": "^1.4.2", 
18 "@typescript-eslint/parser": "^1.4.2", 
| naslint” se “SLS Ln 

20 ht ed be 

cb "jsdom™: ™^14.0.0", 

3 talondar™: "Se 33 

23 "tslint": "5.14.0", 

24 nEOsoript m3 33393 

25 "webpack": "^4.29.6", 

26 "webpack-cli": "^3.2.3" 

人 } 

28 上 


packagejson 中 的 scripts 会 按照 一 定 的 顺序 寻找 命令 对 应 位 置 ， 项 目 根 目 录 中 的 
node_ modules/.bin 路 径 就 在 这 个 寻找 清单 中 。 所 以 无 论 是 全 局 还 是 局 部 安装 的 webpack， 
| 你 都 不 需要 给 出 前 面 详 细 的 路 径 信息 ， 只 需要 提供 命令 即 可 。 


webpack 打包 的 基本 过 程 如 图 6.45 所 示 。 在 src 目录 下 ， 要 先 用 tsc 编译 命令 将 ts 文件 编 
译 成 js 文件 , 然后 webpack 对 入 口 函数 app.js 进 行 依赖 分 析 , 将 appjs 和 sum.js 打 包 成 bundlejs。 
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Index-html 


图 6.45 ”webpack 打包 过 程 示意 图 


开发 总 是 离 不 开 调试 ， 方 便 的 调试 能 极 大 地 提高 开发 效率 ， 不 过 有 时 候 通过 webpack 打 
包 后 的 文件 , 我 们 是 不 容易 找到 出 错 的 具体 位 置 的 。source map 就 是 为 了 帮 有 我 们 解决 这 个 问题 


通过 简单 的 配置 ,webpack 就 可 以 在 打包 时 为 我 们 生成 source map 文件 。 这 为 我 们 提供 了 
一 种 映射 编译 文件 和 源 文件 的 方法 ， 使 得 编译 后 的 代码 可 读 性 更 高 ， 也 更 容易 调试 。 

在 webpack 的 配置 文件 中 配置 source map 时 需要 配置 devtool。 它 有 以 下 几 种 不 同 的 配置 
选项 ， 各 有 优 缺 点 : 


Source-map: 在 一 个 单独 的 文件 中 产生 一 个 完整 且 功能 完全 的 文件 。 这 个 文件 具有 最 
好 的 source map， 但 是 它 会 碱 慢 打包 速度 。 

cheap-module-source-map: 在 一 个 单独 的 文件 中 生成 一 个 不 带 列 映射 的 map。 不 带 列 
映射 提高 了 打包 速度 , 但 是 也 使 得 浏览 器 开发 者 工具 只 能 对 应 到 具体 的 行 , 不 能 对 应 
到 具体 的 列 (符号 ) ， 会 对 调试 造成 不 便 。 

eval-source-map: 使 用 eval 打包 源 文件 模块 , 在 同一 个 文件 中 生成 和 干净、 完整 的 source 
map。 这 个 选项 可 以 在 不 影响 构建 速度 的 前 提 下 生成 完整 的 source map， 但 是 对 打包 
后 输出 的 JS 文件 的 执行 具有 性 能 和 安全 的 隐患 。 在 开发 阶段 这 是 一 个 非常 好 的 选项 ， 
在 生产 阶段 则 一 定 不 要 启用 这 个 选项 。 

cheap-module-eval-source-map: 这 是 在 打包 文件 时 最 快 的 生成 source map 的 方法 ， 生 
成 的 source map 会 和 打包 后 的 JavaScript 文件 同行 显示 ， 没 有 列 映 射 ， 和 
eval-source-map 选项 具有 相似 的 缺点 。 


上 述 选 项 由 上 到 下 打包 速度 越 来 越 快 , 不 过 同时 也 具有 越 来 越 多 的 负面 作用 , 较 快 的 打包 
速度 的 后 果 就 是 对 打包 后 的 文件 的 执行 有 一 定 影响 。 

前 面 提 到 ， 如果 要 在 Visual Studio Code 中 让 程序 启动 的 时 候 可 以 执行 多 个 任务 , 如 编译 、 
测试 和 打包 ， 就 需要 借助 taskjson 中 的 复合 任务 。 下 面 给 出 taskjson 配置 ， 如 代码 6-19 所 示 。 
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【代码 6-19】 复合 任务 配置 代码 : taskjson 


01 下 

02 OO 

03 "Ea |e 

04 "type": "npm", 

05 "script": "Prebuild ts", 
06 »Tabel"s "Dulld Ets” 

07 pry 

08 "type": "npm"y 

09 "soripi .tat 

10 “1abel”s "todt to" 

时 }, { 

Ba "type": "npm", 

3 "script": "webpack src", 
14 "label": "webpack_src" 
LS }，!{ 

16 "label"; "ts_test_build"， 
7 "dependsOn": ["test ts", "webpack _ src", "build ts"] 
18 } 

a ] 

20 } 

rn } 


在 代码 6-19 中 ，16 行 用 label 定义 了 一 个 名 为 ts_test_build 的 复合 任务 ， 用 dependsOn 关 
键 字 指明 了 要 调用 的 任务 列表 。17 行 表示 要 执行 test_ts、webpack_src 和 build ts 任务 。 


6.5.3 ”构建 本 地 服务 器 


想 不 想 让 我 们 的 浏览 器 监听 你 的 代码 修改 , 并 自动 刷新 显示 修改 后 的 结果 ? 这 样 可 以 更 好 
地 进行 代码 调试 和 预览 。 另 外 ， 很 多 前 后 台 交互 的 应 用 必须 在 Web 服务 器 上 跑 起 来 才 可 以 发 
送 ajax 请 求 等 。 

有 一 个 lite-server 工具 ， 可 以 快速 搭建 本 地 Web 服务 器 。 它 的 优势 在 于 : 

@ ”搭建 迅速 ， 只 需要 安装 npm 包 即 可 。 

@ 可 自动 刷新 ， 使 用 BrowserSync 监测 文件 变化 。 

@ 可 配置 多 种 选项 ， 比 如 默认 端口 及 默认 文件 夹 等 。 

在 Visual Studio Code 的 终端 命令 行 下 通过 命令 npm install --save-dev lite-server 对 
lite-server 工具 进行 安装 。 

安装 完成 后 , 在 项 目 根 目 录 下 新 建 一 个 bs-config.json 的 文件 , 用 来 配置 lite-server 的 启动 
项 。bs-config.json 代码 如 代码 6-20 所 示 。 
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【代码 6-20】 bs-config.json 配置 代码 : bs-config.json 


01 { 

02 "port": 8000, 

03 "files™"s [”。/dist/**/*. {html,htmycssrjs}"] 
04 noorveor": 1 MDasoDirne We/Alot 

05 } 


为 了 简化 lite-server 的 调用 ， 我 们 在 package.json 中 配置 一 个 脚本 liteserver， 其 值 为 
lite-server， 如 图 6.46 所 示 。 


{} packagejson x 


和 ， 沁 


: "tsc", 
: "eslint ./src/eslint-test.ts", 
9 "eslint_src": "eslint src --ext .ts", 

19 "test": 


/dist/app.js -0 ./dist/bundle.js", 


6.46 ”package.json 中 lite-server 脚本 配置 界面 
至 此 ， 我 们 就 可 以 在 Visual Studio Code 终端 命令 行 中 用 命令 npm run liteserver 来 启动 本 
地 服务 器 了 。 启 动 服务 器 界面 如 图 6.47 所 示 。 


PS C:\Src\chartper6\vscode> npm run liteserver 


> vscode-typescript@1.6.9 liteserver C:\Src\chartperé\vscode 
> lite-server 


** browser-sync config "= 
{ injectChanges: false, 
files: [ './dist/**/*.fhtml,htm,css,js}" ], 
watchOptions: { ignored: ‘node modules' }, 
server: 
{ baseDir: './dist', middleware: [ [Function], [Function] ] }, 
port: 8989 } 
[Browsersync] Access URL: 


Local: http://1ocalhost;:8866 
External: http://192.168.1.21:8666 


http://1localhost:3661 
http://1ocalhost:3661 


UI 
UI External 


[Browsersync] Serving files from: ./dist 
[Browsersync] Watching files... 

19.93.15 16:11:18 384 GET /index.html 
19.93.15 16:11:18 384 GET /bundle.js 


6.47 ”lite-server 启动 界面 
此 时 我 们 就 可 以 在 浏览 器 中 输入 localhost:8000 来 预览 index.html 了 ， 如 图 6.48 所 示 。 
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DD webpack demo x Br 2 
€ 》C © loclhosta000 儿女 ©: 
sum(1.2)=3 


6.48 lite-server 预览 index.html 界面 


6.6 小 结 


本 章 对 TypeScript 开发 和 调试 的 相关 工具 进行 了 介绍 ， 这 些 工具 都 能 非常 好 地 和 Visual 
Studio Code 集成 起 来 。Visual Studio Code 作为 一 个 很 重要 且 功 能 很 强大 的 编辑 器 ,非常 好 用 ， 
最 重要 的 是 开源 免费 。Visual Studio Code 可 以 说 是 开发 TypeScript 非常 好 用 的 一 款 编辑 器 ， 
本 身 是 用 TypeScript 编写 的 。 

TypeScript 是 静态 类 型 语言 ， 本 身 的 编译 器 就 可 以 发 现 很 多 语法 错误 ， 再 结合 ESLint 和 
TSLint 工具 ， 可 以 在 编程 的 规范 和 最 佳 实践 规则 上 进一步 提升 我 们 编写 代码 的 规范 度 和 健壮 
性 。 

Jest 工具 可 以 大 大 提高 我 们 对 TypeScript 代码 进行 测试 的 效率 。webpack 可 以 一 站 式 也 将 
我 们 的 代码 进行 压缩 和 转化 ， 方 便 、 快 捷 。 
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第 7 章 
< 面向 对 象 编程 > 


面向 对 象 编程 (Object Oriented Programming) 是 目前 非常 重要 的 一 种 编程 方式 ， 当 前 主 
流 的 强 类 型 语言 如 C# 和 Java 都 提供 了 面向 对 象 的 语法 特征 。 相 对 于 面向 过 程 来 说 ， 面 向 对 象 
有 封装 、 继 承 和 多 态 性 等 特性 ， 因 此 面向 对 象 编 程 可 以 设计 出 高 内 聚 、 低 耦合 的 系统 ， 从 而 使 
系统 更 加 灵活 、 更 加 易于 维护 。 

面 对 软件 规模 的 日 趋 扩大 、 架 构 的 日 趋 复杂 和 需求 变化 的 日 趋 加 快 , 将 计算 机 解决 问题 的 
基本 方法 统一 到 人 类 解决 问题 的 习惯 方法 之 上 ， 这 是 提出 面向 对 象 的 首要 原因 。 

可 重用 性 代表 着 软件 产品 的 可 复 用 能 力 , 是 衡量 一 个 软件 产品 成 功 与 否 的 重要 标志 。 当今 
的 软件 开发 行业 ， 人 们 越 来 越 追求 开发 更 通用 的 可 重用 构件 ， 从 而 使 软件 开发 过 程 彻底 改善 ， 
即 从 过 去 的 语句 级 编码 发 展 到 现在 的 构件 组 装 , 最 终 实现 提高 软件 开发 的 效率 , 降低 软件 维护 
成 本 的 目的 。 

面向 对 象 编程 的 本 质 是 以 建立 模型 来 抽象 表达 现实 事物 .模型 是 用 来 反映 现实 世界 中 事物 
特征 的 一 种 抽象 载体 ,一 般 情况 下 ,任何 一 个 模型 都 不 可 能 完全 反映 客观 事物 的 一 切 具体 特征 ， 
但 是 可 以 根据 需求 抓 住 待 解决 问题 的 主要 矛盾 , 即 主要 的 特征 和 行为 。 合理 的 建 模 既 可 以 对 现 
实事 物 中 的 主要 特征 和 行为 进行 描述 ， 又 可 以 简化 问题 。 

面向 对 象 是 把 待 解决 问题 分 解 成 各 个 对 象 ， 而 建立 对 象 的 目的 不 是 为 了 完成 某 一 个 步骤 ， 
而 是 为 了 描述 某 个 事物 在 整个 解决 问题 的 步骤 中 的 特征 和 行为 。 面 向 对 象 是 以 功能 来 划分 问 
题 ， 而 不 是 步骤 。 

曾经 在 网 上 看 到 过 一 篇 文章 ， 用 一 个 比较 具象 的 例子 来 说 明 面向 对 象 和 面向 过 程 的 不 同 。 
面向 对 象 写 出 来 的 程序 相当 于 盖 饭 , 而 面向 过 程 写 出 来 的 程序 相当 于 炒饭 。 用 面向 对 象 的 思想 
六 分 术 浊 作 ， 那 么 可 以 抽象 出 来 盖 饭 主要 是 由 白米 饭 和 菜 〈 盖 在 米饭 上 ) 构成 的 ， 因 此 可 以 将 

分 解 成 白米 饭 和 菜 。 

盖 饭 有 很 多 种 ， 其 中 主要 的 区 别 就 是 通过 菜 来 决定 的 。 如 果 盖 在 饭 上 的 是 青椒 肉 丝 ,那么 

就 是 青椒 肉 丝 盖 饭 ; 如 果 盖 在 饭 上 的 是 番茄 鸡蛋 ， 那 么 就 是 番茄 鸡蛋 盖 饭 。 由 此 可 以 看 出 , 我 
们 为 了 提高 服务 的 速度 和 后 续 可 扩展 性 , 可 以 将 米饭 的 制作 通过 电饭煲 完成 , 然后 将 番茄 鸡蛋 
和 青椒 肉 丝 分 别 做 好 , 这 样 就 可 以 通过 不 同 的 组 合 来 生成 不 同 的 盖 饭 了 。 此 时 如 果 有 新 客户 说 
要 一 份 鱼 香 肉 丝 盖 饭 ， 那 么 我 们 只 需要 单独 炒 一 份 鱼 香 肉 丝 即 可 ， 饭 不 用 重新 做 ， 从 而 提高 了 
扩展 性 。 面 向 对 象 就 是 高 内 聚 、 低 耦合 ， 相 当 于 一 种 积木 的 方式 ， 可 以 组 合成 不 同 的 系统 。 

如 果 是 炒饭 ， 炒 饭 的 精 肯 在 于 入 味 和 融合 。 炒 饭 是 将 饭 和 菜 ( 例 如 鸡蛋 充分 进行 翻 炒 ， 
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达到 饭 中 有 菜 、 菜 中 有 饭 的 境界 。 炒 饭 虽 然 好 吃 , 但 是 饭 和 菜 一 旦 混合 , 二 者 分 离 起 来 非常 难 ， 
如 果 客 户 说 我 要 青椒 肉 丝 炒 饭 ， 那 么 之 前 的 蛋 炒饭 就 无 法 利用 了 ， 只 能 重新 将 饭 和 菜 准备 好 ， 
之 前 的 饭 无 法 重用 。 

盖 饭 的 好 处 就 是 将 菜 和 饭 分 离 ， 从 而 提高 了 制作 盖 饭 的 灵活 性 。 饭 不 满意 就 换 饭 ， 菜 不 满 
意 就 换 菜 。 从 软件 工程 领域 来 说 , 盖 饭 就 是 可 维护 性 和 扩展 性 比较 好 , 饭 和 菜 的 耦合 度 比较 低 。 

炒饭 将 菜 和 饭 搅和 在 一 起 ， 想 换 炒饭 中 的 菜 和 饭 都 很 困难 , 饭 和 菜 的 看 合 度 很 高 ， 以 至 于 
可 维护 性 比较 差 。 

软件 工程 追求 的 目标 之 一 就 是 可 维护 性 。 可 维护 性 主要 表现 在 3 个 方面 : 可 理解 性 、 可 测 
试 性 和 可 修改 性 。 面 向 对 象 的 好 处 之 一 就 是 显著 地 改善 了 软件 系统 的 可 维护 性 。 

面向 对 象 是 一 种 对 现实 世界 理解 和 抽象 的 方法 ,是 计算 机 编程 技术 发 展 到 一 定 阶 段 后 的 产 
物 。 抽 象 、 封 装 、 继 承 和 多 态 是 面向 对 象 的 基础 ， 是 面向 对 象 的 四 大 基础 特性 。 下 面 将 详细 介 
绍 这 四 大 基本 特性 : 


@ 抽象 

提取 现实 世界 中 某 事物 的 关键 特性 , 为 该 事物 构建 模型 的 过 程 。 对 同一 事物 在 不 同 的 需求 
下 ， 需 要 提取 的 特性 可 能 不 一 样 。 得 到 的 抽象 模型 中 一 般 包含 属性 〈 数 据 ) 和 操作 行为 )。 
这 个 抽象 模型 称 为 类 。 对 类 进行 实例 化 可 得 到 对 象 。 

@ 封装 

封装 可 以 使 类 具有 独立 性 和 隔离 性 , 保证 类 的 高 内 聚 。 只 暴露 给 类 外 部 或 者 子 类 必需 的 属 
性 和 操作 。 类 封装 的 实现 依赖 类 的 修饰 符 (public、protected 和 private 等 ) 。 

@ 继承 

对 现 有 类 的 一 种 复 用 机 制 。 一 个 类 如 果 继 承 现 有 的 类 , 那么 这 个 类 将 拥有 被 继承 类 的 所 有 


非 私 有 特性 〈 属 性 和 操作 ) 。 这 里 指 的 继承 包含 类 的 继承 和 接口 的 实现 。 子 类 可 以 对 父 类 的 行 
为 和 属性 进行 扩展 和 覆盖 。 

@ 多 态 

多 态 是 在 继承 的 基础 上 实现 的 。 多 态 有 3 个 要 素 : 继承 、 重 写 和 父 类 引用 指向 子 类 对 象 。 
父 类 引用 指向 不 同 的 子 类 对 象 时 , 调用 相同 的 方法 , 呈现 出 不 同 的 行为 , 这 就 是 类 的 多 态 特 性 。 
多 态 可 以 分 成 编译 时 多 态 和 运行 时 多 态 。 

在 面向 对 象 四 大 基础 特性 之 上 ,我 们 在 做 面向 对 象 编程 设计 时 还 需要 遵循 一 些 基 本 的 设计 
原则 : 

@ 单一 职责 原则 

不 要 存在 多 于 一 个 导致 类 变更 的 原因 。 通俗 地 说 , 就 是 一 个 类 只 负责 一 项 职责 。 如 果 一 个 
类 拥有 多 个 职责 ,那么 这 些 职责 就 会 耦合 到 一 起 ， 也 就 会 有 多 个 原因 来 导致 这 个 类 的 变化 。 对 
于 某 一 职责 的 更 改 可 能 会 损害 类 满足 其 他 耦合 职责 的 能 力 。 这 样 职责 的 耦合 会 导致 设计 的 脆 
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弱 ， 以 至 于 当 职 责 发 生 更 改 时 产生 无 法 预期 的 破坏 。 
@ 里 氏 蔡 换 原 则 


所 有 引用 基 类 的 地 方 必须 能 透明 地 使 用 其 子 类 的 对 象 ， 也 就 是 说 子 类 可 以 扩展 父 类 的 功 
能 ， 但 不 能 改变 父 类 原 有 的 功能 。 


@ 依赖 倒置 原则 


高 层 模块 不 应 该 依赖 低层 模块 ， 二 者 都 应 该 依赖 其 抽象 ; 抽象 不 应 该 依赖 细节 ; 细节 应 该 
依赖 抽象 。 简 单 地 说 就 是 尽量 面向 接口 编程 。 


@ 接口 隔离 原则 


客户 端 不 应 该 依赖 它 不 需要 的 接口 。 一 个 类 对 另 一 个 类 的 依赖 应 该 建立 在 最 小 的 接口 上 。 
接口 功能 应 该 最 小 化 ， 过 于 腑 肿 的 接口 应 该 拆 分 为 多 个 接口 。 


@。 迪 米 特 原则 

一 个 对 象 应 该 对 其 他 对 象 保持 最 少 的 了 解 ， 简 单 的 理解 就 是 高 内 聚 、 低 耦合 。 一 个 类 尽量 
减少 对 其 他 对 象 的 依赖 ， 并 且 这 个 类 的 方法 和 属性 能 用 私有 的 就 尽量 私有 化 。 

@ 开 闭 原则 


一 个 软件 实体 如 类 、 模 块 和 函数 应 该 对 扩展 开放 ， 对 修改 关闭 。 当 软件 需求 变化 时 ， 尽 量 
通过 扩展 软件 实体 的 行为 来 实现 变化 ， 而 不 是 通过 修改 已 有 的 代码 来 实现 变化 。 


如 果 一 味 地 遵守 这 些 设计 原则 ， 将 导致 代码 分 层 和 类 变 多 ， 项 目 变 得 非 党 大。 所 以 
对 这 些 原则 要 根据 实际 情况 做 出 取 含 。 一 般 分 层 不 要 过 多 ， 否 则 会 导致 代码 变 得 难以 
| 维护 和 跟踪 。 


传统 的 JavaScript 程序 使 用 函数 和 基于 原型 的 继承 来 创建 可 重用 的 组 件 , 但 对 于 习惯 使 用 
面向 对 象 编程 方式 的 程序 员 来 说 就 有 些 棘手 了 ,因为 面向 对 象 编程 用 的 是 基于 类 的 继承 且 对 象 
是 由 类 创建 出 来 的 。 从 ES6 开始 ，JavaScript 程序 员 将 能 够 使 用 基于 类 的 面向 对 象 的 方式 , 但 
目前 ES6 还 没有 得 到 所 有 主流 浏览 器 的 支持 。 

如 果 我 们 现在 就 想 在 Web 应 用 上 使 用 ES6 的 面向 对 象 来 编程 ， 那 么 TypeScript 是 一 个 很 
好 的 选择 。TypeScript 允许 开发 者 使 用 面向 对 象 的 特性 来 编写 代码 ， 并 且 编 译 后 的 JavaScript 

(可 以 配置 编译 目标 版 本 为 ES5) 可 以 在 所 有 主流 浏览 器 和 平台 上 运行 。 通过 本 章 的 学 习 可 以 
让 读者 掌握 面向 对 象 的 编程 的 基本 概念 ， 并 掌握 TypeScript 语言 中 类 、 接 口 、 模 块 以 及 命名 空 
间 的 基本 用 法 。 

本 章 主要 涉及 的 知识 点 有 : 


@ ”面向 对 象 的 基本 概念 : 学 会 如 何 把 数据 有 机 地 组 合 起 来 . 
@ ”对 象 的 创建 。 
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类 的 基本 概念 和 类 的 用 法 。 
接口 的 概念 以 及 用 法 。 
命名 空间 以 及 其 用 法 。 

外 部 模块 的 概念 和 用 法 。 
模块 解析 过 程 。 


声明 合并 。 


7.1 wg 


在 面向 对 象 编程 中 ， 首 先 要 明白 对 象 (object) 的 基本 概念 ， 理 解 对 象 概念 是 学 习 面 向 对 
象 编程 的 基础 。 对 象 指 的 是 具体 的 某 个 事物 ， 具 有 唯一 性 标识 、 状 态 和 行为 这 三 大 特性 。 

@ ”唯一 性 标识 

每 个 对 象 都 有 自身 唯一 的 标识 ,通过 这 种 标识 可 找到 相应 的 对 象 。 在 对 象 的 整个 生命 期 中 ， 
它 的 标识 都 不 会 改变 。 不同 的 对 象 不 能 有 相同 的 标识 。 以 现实 中 的 汽车 为 例 , 汽车 的 唯一 性 可 
以 通过 车 架 号 来 区 分 ， 这 个 车 架 号 就 是 唯一 性 标识 。 

@ 状态 

状态 也 可 以 称 为 属性 , 可 以 描述 一 个 对 象 的 特征 。 这 个 特征 可 以 是 永久 的 , 也 可 以 被 外 界 
改变 。 举 例 来 说 ， 某 一 车 架 号 的 汽车 ， 颜 色 为 白色 ， 如 果 重 新 喷漆 ， 换 了 一 种 颜色 ， 那 么 它 此 
时 的 状态 〈 颜 色 ) 就 会 改变 。 

@ 行为 

行为 也 可 以 称 为 方法 ,是 一 个 对 象 主动 或 被 动 去 执行 某 种 操作 。 举 例 来 说 ， 某 个 车 架 号 的 
汽车 具有 驾驶 、 加 油 的 行为 。 行 为 本 质 上 是 函数 ， 可 以 被 自己 或 者 外 部 调用 。 


7.1.1 创建 简单 对 象 


现实 世界 中 的 具体 事物 〈 实 体 ) 可 以 映射 到 计算 机 世界 的 对 象 上 。 在 TypeScript 语言 中 ， 
对 象 是 包含 一 组 键 值 对 的 实例 ， 对 象 的 值 可 以 是 标量 、 函 数 、 数 组 或 其 他 对 象 等 。 

对 象 具 体 包 含 哪 些 属性 和 方法 ， 需 要 结合 具体 的 问题 来 分 析 。 现实 中 的 客观 事物 内 部 可 能 
非常 复杂 , 但 是 我 们 用 面向 对 象 的 思想 来 解决 问题 时 需要 抓 住 事物 的 主要 矛盾 。 主 要 矛盾 中 涉 
及 的 具体 属性 和 方法 一 般 就 是 某 对 象 的 属性 和 方法 。 在 TypeScript 中 , 可 以 用 对 象 字 面 量 的 方 
式 来 创建 简单 的 对 象 。 基 本 语法 为 : 

01 ”var 或 let 对 象 名 = { 


02 属性 1: "valuel"， 
03 属性 2: "value2"， 


209 


TypeScript 实战 


04 方法 1: function() { 
05 // 函数 

06 } 

07 } 


对 象 可 以 用 var 或 者 let 来 创建 ,当然 也 可 以 用 const 来 创建 , 对 象 名 必须 符合 标识 符 的 命 
名 规则 。 对 象 中 的 属性 可 以 是 不 同类 型 支持 标量 (字符 、 布 尔 、 数 值 等 )、 函 数 、 数 组 或 元 
组 等 。 对 象 字 面 量 中 的 成 员 之 间 用 逗号 分 隔 。 


总 对 象 中 的 方法 一 般 是 匿名 函数 ， 如 果 方法 需要 递归 调用 ， 就 需要 用 命名 函数 来 声明 。 | 


假设 我 们 现在 需要 设计 一 个 学 生 管理 信息 系统 ， 首 先 要 通过 实际 调研 来 听取 客户 的 需求 ， 
掌握 此 系统 立项 的 目的 以 及 具体 要 求 (主要 矛盾 ) 。 在 现实 世界 中 , 学 生 管理 系统 中 最 重要 的 
对 象 就 是 学 生 ， 学 生 对 象 本 身 具 有 很 多 属性 ， 例 如 学 号 、 姓 名 、 班 级 、 性 别 、 身 高 、 体 重 和 入 
学 年 份 等 。 另 外 ,学 生 对 象 也 具有 很 多 的 行为 (对 象 的 方法 )， 例如 选课 、 上 课 、 走 路 和 吃饭 。 
在 TypeScript 中 ， 可 以 用 代码 7-1 来 创建 一 个 学 生 对 象 。 


【代码 7-1】 用 对 象 字面 量 创建 学 生 对 象 示例 : student.ts 


01 let student = { 


02 code: "09064248", 
03 name: "Jack", 

04 age: 19, 

05 clazz: "高 三 一 班 "， 
06 inYear: 2009, 

07 getScore: function () { 
08 return { 

09 "数学 ": 99， 
10 "6 
ll "外 语 ": 96， 
ps 1 

3 } 

14 } 


在 代码 7-1 中 ， 用 对 象 字面 量 创建 了 一 个 名 为 student 的 学 生 对 象 。 该 学 生 对 象 的 属性 有 
code( 学 号 ) 、name (姓名 ) 、age( 年 龄 )、clazz〔 班 级 ) 和 inYear (入门 年 份 )。07 行 定 
义 了 一 个 获取 分 数 的 方法 getScore,， 返回 各 课程 对 应 的 考试 分 数 ， 实 际 上 返回 的 考试 分 数 也 是 
一 个 对 象 。 


| 05 行 班级 用 clazz 而 没有 用 class， 虽 然 class 从 语法 上 可 以 作为 属性 ， 但 是 其 为 内 置 关键 ] 
人。 字 ， 建议 还 是 尽量 不 要 使 用 。 


其 中 ，student 是 识别 学 号 为 09064248 学 生 的 唯一 标识 符 。 通 过 student 标识 ， 可 找到 相 
应 的 学 生 对 象 。 在 对 象 的 整个 生命 期 中 , 它 的 标识 都 不 能 改变 。 在 同一 个 作用 域 中, student 不 
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能 重复 声明 。 


一 旦 定义 了 student 对 象 ， 就 可 以 用 对 象 来 访问 属性 和 方法 。 代 码 7-2 给 出 如 何 通 过 对 象 
名 来 访问 属性 和 方法 的 示例 。 
【代码 7-2】 通过 对 象 名 来 访问 属性 和 方法 示例 : student2.ts 


01 let a = student .age Hl9 

02 let b = student.name; //"Jack" 

03 let c = student.getScore(); //{ 数 学 : 99， 语 文 : 96， 外 语 : 96} 
04 let d = student["name"]; //"Jack" 


05 let f= student["getScore"] (); //{ 数 学 : 99， 语 文 : 96， 外 语 : 96} 

在 代码 7-2 中 ， 可 以 用 对 象 名 .属性 名 来 访问 属性 。 另 外 ， 也 可 以 用 对 象 名 [" 属 性 名 "] 来 访 
问 属性 。 在 TypeScript 中 ,访问 某 个 对 象 的 属性 和 方法 时 ,编辑 器 可 以 智能 地 给 出 提示 ， 如 图 
7.1 所 示 。 


Tet student ={ 
2 code: "89964248"， 
3 name: "Jack”, 

4 age: 19， 


16 student,] 


© age 
© clarz 《property) clazz: string 
© code 

© BetScore 


© inYear 
9 name 


图 7.1 访问 student 对 象 属性 或 方法 时 的 智能 提示 界面 


通过 图 7.1 可 以 看 出 , 当 输入 对 象 名 后 的 .符号 后 , 编辑 器 会 罗列 出 所 有 的 对 象 属性 和 方法 ， 
同时 给 出 对 象 属性 的 类 型 。 


芒 对 象 是 榨 信 引用 传递 的 。 | 


7.1.2 ”给 对 象 添加 函数 

函数 是 定义 对 象 行为 的 载体 , 是 让 对 象 可 以 对 外 或 对 内 提供 服务 的 方法 。 对 象 中 的 方法 与 
普通 函数 相 比 ， 需 要 通过 对 象 来 调用 ， 而 不 能 直接 调用 。 

在 JavaScript 中 ， 可 以 给 一 个 已 经 存在 的 对 象 直接 添加 方法 ， 如 代码 7-3 所 示 。 
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【代码 7-3】 JavaScript 中 直接 给 student 对 象 添加 函数 示例 


: student3.js 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
本 
了 
33 
14 
15 
16 
17 
18 
19 


在 代码 7-3 中 ，19 行 通过 student.walk() 来 调用 16 行 给 对 象 添加 的 方法 walk， 控 制 台 输 


/V/UavaScript 
let student = { 
code: "09064248", 
name: "Jack", 
age: 19, 
Clazze "i 
inYear: 2009, 
getScore: function () { 
return { 
"数学 ": 99， 
"语文 "; 967 
96 
}; 


student .walk = function () { 
console.log ("walk"); 

} 

student .walk(); 


出 "walk" 信 息 。 


在 TypeScript 中 ， 这 种 方式 给 对 象 student 动态 添加 方法 walk 则 行 不 通 , 编译 器 会 提示 错 


误 ， 如 图 7.2 所 示 。 


从 图 7.2 可 以 看 出 ，TypeScript 中 不 允许 直接 在 对 象 student 上 添加 方法 walk， 如 15 行 所 
示 ，walk 下 面 有 红色 波浪 线 ， 表 示 语 法 错误 。 这 是 因为 在 TypeScript 中 ， 具 体 对 象 应 该 有 一 


个 类 型 模板 。TypeScript 中 的 对 象 必须 是 特定 类 型 的 实例 。 
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1 let student = { 
2 code: “99664248”， 


3 name: "Jack”, 

4 age: 19， 

5 clazz:“ 高 三 一 班 "， 

6 inYear: 2669， 

7 getscore: function () { 
8 return { 


14 
15 student.walk = function () { 
16 console.log("walk"); 

17 


18 student.walk(); 


图 7.2 给 对 象 student 动态 添加 方法 报错 界面 
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那么 如 何在 TypeScript 中 给 对 象 添加 函数 呢 ? 可 以 通过 在 声明 中 使 用 方法 模板 来 解决 此 
问题 。 代 码 7-4 给 出 在 TypeScript 中 通过 类 型 模板 的 方式 给 student 对 象 添 加 函数 的 示例 。 


【代码 7-4】 通过 类 型 模板 方式 给 student 对 象 添加 函数 的 示例 : student4.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
本 
2 
43 
14 
15 
16 
7 
18 
| 
20 


let student = { 


code: "09064248", 
name: "Jack", 
age: 19, 

clazz: "高 三 一 班 "， 
inYear: 2009, 


getScore: function () { 


return { 
"数学 ": 99， 
"语文 ": 96， 
”外语 本 967 


7 
}， 
walk:function() { } // 类 型 模板 


3 
// 外 部 可 以 添加 


Student .walk = function () { 


console.log ("walk"); 


student .walk(); 


在 代码 7-4 中 ，14 行 定义 了 一 个 类 型 模板 ， 用 来 定义 一 个 空 的 walk 函数 ， 函 数 体 中 什么 
语句 也 没有 指定 。 此 时 在 17 行 重新 给 出 对 象 student 方法 walk 的 具体 实现 逻辑 。 看 到 这 里 ， 
有 的 读者 可 能 会 问 , 何必 这 么 麻烦 , 直接 在 对 象 student 中 定义 函数 walk 并 实现 不 就 可 以 了 吗 ? 
这 里 需要 指出 的 是 ， 代 码 7-4 只 是 给 出 了 一 种 添加 方法 的 方式 ， 让 我 们 多 一 种 选择 而 已 。 


在 代码 7-4 中 ，14 行 也 可 以 给 出 默认 的 方法 实现 ， 在 17 行 重新 定义 同名 的 方法 ， 对 默认 
的 方法 逻辑 进行 重 写 覆 盖 即 可 。 


那么 如 何 给 对 象 动态 添加 属性 呢 ? 可 以 通过 定义 与 对 象 同名 的 接口 来 实现 对 象 属性 的 扩 
展 。 接 口 在 后 续 章 节 再 详细 介绍 。 代 码 7-5 给 出 定义 与 对 象 同名 的 接口 来 实现 对 象 属性 扩展 的 


示例 。 


【代码 7-5】 定义 与 对 象 同名 的 接口 来 实现 对 象 属性 扩展 示例 : student5.ts 


01 
02 
03 
04 


let student = { 


code: "09064248", 
name: "Jack", 
age: 19, 
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05 C 
06 了 
07 g 
08 

09 

10 

Eb 

El 

13 } 
14 Wi 
15 } 


azz- ni 
nYear: 2009, 
etScore: function () { 
return { 
"数学 ": 99， 
96 
"外 语 % 965 


] 


alk:function() { } // 类 型 模板 


16 ”// 动 态 添加 属性 


Th interface student { 


18 [key: string]: any 

To 

20 ”// 添 加 属性 

21 student["height"] = 180; // 不 能 用 student .height 


22 student ["weight"] 


120; 


23 ”// 外 部 可 以 添加 
24 student .walk = function () { 


2 c 
26 . 


‘onsole.log (this.name+"walk"+this.height) 7? 


| student .walk(); 


在 代码 7-5 


中 ，17 行 定义 了 一 个 与 对 象 student 同名 的 接口 〈interface) 。 在 接口 中 ，18 


行 给 出 了 一 个 匹配 任意 键 值 对 的 属性 定义 ， 其 中 属性 名 是 字符 串 ， 且 必须 用 [] 进 行 属性 定义 。 
21 行 和 22 行 给 student 动态 添加 了 height 和 weight 属性 。25 行 通过 this.height 访问 刚 定义 的 


属性 height。 


EE 


既 可 以 通过 定义 与 对 象 同名 的 接口 来 扩展 属性 ， 也 可 以 通过 这 种 方式 来 扩展 方法 。 | 


这 里 需要 六 


E 意 的 是 , 如 果 一 个 对 象 用 const 关键 字 来 定义 , 那么 和 基本 数据 类 型 不 同 , const 


定义 的 对 象 中 的 属性 是 可 以 修改 的 。 代 码 7-6 给 出 const 定义 的 对 象 属性 可 修改 的 示例 。 
【代码 7-6】 const 定义 的 对 象 属性 可 修改 示例 代码 : const_objts 


01 const student = { 


02 code: "09064248", 
03 name: "Jack" 
04 } 


05 student .name = "JackWang"; 


06 console.log(student .name) 7 //"JackWang" 


07 //const cname = "Smith"; 
08  //cname = "Smith2"; //const 只 读 ， 不 能 修改 
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在 代码 7-6 中 ， 虽 然 01 行 用 const 定义 了 一 个 student 对 象 ， 但 是 05 行 是 可 以 修改 属性 
name 值 的 。 对 于 基本 数据 类 型 来 说 ， 却 不 可 以 修改 值 。07 行 用 const 定义 了 一 个 string 类 型 
的 变量 cname，08 行 尝试 去 修改 变量 cname 的 值 ， 所 以 编译 器 会 报错 。 


7.1.3 duck-typing 


鸭子 类 型 duck- typing) 是 动态 类 型 的 一 种 风格 。 在 这 种 风格 中 ， 一 个 对 象 有 效 的 语义 
不 是 由 继承 自 特定 的 类 或 实现 特定 的 接口 决定 ， 而 是 由 “当前 方法 和 属性 的 集合 ”决定 。 说 起 
鸭子 类 型 ， 可 以 从 网 上 的 一 个 故事 说 起 : 在 很 久 以 前 ， 有 一 个 TS 国王 ， 他 认为 世界 上 最 美妙 
的 声音 就 是 鸭子 的 嘎嘎 叫 声 , 于 是 他 召集 大 臣 ,， 要 组 建 一 个 由 100 只 鸭子 组 成 的 合唱 团 , 为 他 
天 天 表演 。 大 臣 找 遍 了 全 国 ， 只 找到 99 只 鸭子 ， 差 一 只 ， 最 后 大 臣 发 现 有 一 只 非常 特别 的 向 ， 
它 的 叫 声 跟 鸭 子 一 模 一 样 ， 于 是 这 只 鹅 就 成 为 合唱 团 的 一 员 。 

觅 子 类 型 形象 的 解释 就 是 “ 当 看 到 一 只 鹅 走 起 来 像 鸭子 、 叫 起 来 像 鹅 子 时 ， 这 只 鹅 就 可 以 
被 称 为 鸭子 ”。 

在 鸭子 类 型 中 , 关注 点 在 于 对 象 的 行为 , 即 能 做 什么 , 而 不 是 关注 对 象 所 属 的 类 型 。 例如 ， 
在 不 使 用 鸭子 类 型 的 语言 中 ， 可 以 编写 一 个 函数 ， 它 接受 一 个 类 型 为 “鸭子 ”的 对 象 ， 并 调用 
它 的 “ 走 ” 和 “ 叫 ” 方 法 。 在 使 用 鸭子 类 型 的 语言 中 ， 这 样 的 一 个 函数 可 以 接受 任意 类 型 的 对 
象 ， 并 调用 它 的 “ 走 ” 和 “ 叫 ” 方 法 。 如 果 这 些 被 调用 的 方法 不 存在 ， 那 么 将 引发 一 个 运行 时 
错误 。 代 码 7-7 给 出 duck-typing 的 示例 。 
【代码 7-7】 duck-typing 示例 代码 : duck-typing.ts 


01 ”// 聘 子 

02 let duck = function () { 

03 this.singing = function(){ 
04 return "嘎嘎 嘎 ..."; 

05 } 

06 } 

07 ”// 鹅 

08 let geese = function(){ 

09 this.singing = function(){ 
10 return "嘎嘎 嘎 . . . "7 

证 于 } 

12 } 

13 ”// 合 唱 团 


14 let choir = []; 
15 ”// 加 入 合唱 团 方法 


16 Var joinChoir = function(animal){ 


1 if(animal && animal.singing() === "嘎嘎 嘎 ..."){ 
18 choir.push (animal) 7 

19 } 

20 else { 
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2 
3 
23 
24 
25 
26 
这 
28 
29 
30 


console.1og ("不 像 鸭子 ， 不 能 加 入 合唱 团 ") ; //100 
} 
// 加 入 99 只 鸭子 
forl(var i =0;i<99;i++){ 
joinChoir (new duck()); 
上 
// 加 入 1 只 鹅 当 作 鸭子 
joinChoir (new geese()); 
console.log (choir.length); //100 


在 代码 7-7 中 ，02~06 行 创建 一 个 名 为 duck 的 函数 ， 函 数 里 面 定 义 了 一 个 返回 "嘎嘎 嘎 .…" 
声音 的 singing 方 法 .08~12 行 定义 了 一 个 geese 的 函数 ,函数 里 面 也 定义 了 一 个 返回 "嘎嘎 嘎 .…” 
声音 的 singing 方法 。16 行 定义 了 一 个 加 入 合唱 团 的 函数 joinChoir， 该 函数 接受 一 个 参数 ， 且 
参数 必须 验证 是 否 有 singing 方法 且 返 回 的 是 否 为 "嘎嘎 嘎 …"， 如 果 是 就 可 以 认为 是 “鸭子 ”， 
即 可 加 入 合唱 团 。29 行 通过 构造 函数 创建 了 一 个 geese 对 象 ， 并 且 加 入 到 合唱 团 中 。 


7.2 类 


类 (class) 和 对 象 (object) 一 样 ， 也 是 面向 对 象 编程 中 的 一 个 基本 概念 。 对 象 是 对 客观 
事物 的 抽象 ， 而 类 是 对 对 象 的 抽象 。 类 是 一 种 抽象 的 数据 类 型 。 对 象 是 类 的 实例 ， 类 是 对 象 的 
模板 。 类 可 以 作为 对 象 模具 ， 生 产 出 很 多 不 同 的 对 象 。 

对 象 是 具有 类 类 型 的 变量 。 类 是 抽象 的 ， 不 占用 内 存 ， 而 对 象 是 具体 的 ， 占 用 存储 空间 。 
类 是 用 于 创建 对 象 的 模板 ， 它 的 定义 中 包括 方法 和 属性 。 


7.2.1 创建 一 个 类 

TypeScript 是 面向 对 象 的 JavaScript， 其 中 的 类 描述 了 所 创建 对 象 共 同 的 属性 和 方法 ， 声 
明 方 式 如 下 : 

01 class 类 名 { 

02 // 字段 

03 属性 1: string; 

04 属性 2: number; 

05 // 构造 函数 

06 constructor (参数 1:string) { 

07 this .字段 1 = 参数 1; 

08 lL 

09 // 方 法 

10 方法 了 (0) :string { 
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下 地 return this .字段 17 


定义 类 的 关键 字 为 class， 后 面 紧 跟 类 名 。 类 名 首 字 母 一 般 大 写 ， 另 外 类 名 的 命名 必须 满 
足 标识 符 的 命名 规则 。 类 一 般 包含 以 下 部 分 : 

@ 属性 : 属性 是 类 里 面 声明 的 变量 。 属 性 表示 对 象 的 相关 数据 ， 表 示 一 种 状态 。 

@ ”构造 函数 : 类 实例 化 时 被 自动 调用 ， 可 以 为 类 的 对 象 分 配 内 存 空 间 。 

@ 方法 : 方法 是 对 象 要 执行 的 操作 ， 一 般 是 用 函数 来 定义 的 。 

在 类 定义 中 ， 各 成 员 之 间 用 分 号 〈; ) 进行 分 隔 。 一 般 来 说 ， 类 的 属性 后 面 用 分 号 , 方法 
之 间 既 可 以 用 分 号 也 可 以 省 略 分 号 。 


| 类 的 构造 函数 constructor 只 支持 一 个 ,不 能 定义 多 个 ,否则 会 报错 。 默认 情况 下 , 会 自动 
| | 生成 一 个 与 类 名 一 致 且 无 参数 的 构造 函数 ， 如果 用 户 自 定义 了 一 个 构造 函数 , 就 覆盖 默认 
| 的 构造 函数 。 


假设 要 定义 一 个 汽车 类 , 汽车 类 有 一 个 文本 类 型 的 引擎 属性 , 同时 有 一 个 接受 一 个 文本 类 
型 的 参数 的 构造 函数 ， 可 以 为 引擎 属性 初始 化 值 ， 最 后 有 一 个 获取 引擎 属性 的 方法 。 代 码 7-8 
给 出 汽车 类 的 示例 。 
【代码 7-8】 汽车 类 示例 代码 : car.ts 


01 class Car { 


02 // 属性 

03 engine:string ="V8 发 动机 "; 
04 // 构造 函数 

05 constructor (engine:string) { 
06 this.engine = engine; 
07 上 

08 // 方法 

09 getEngine():string { 

10 return this.engine; 

i } 

a } 


在 代码 7-8 中 ,声明 了 一 个 Car 类 .这 个 Car 类 有 3 个 成 员 :一 个 engine 属 性 ,一 个 constructor 
构造 函数 和 一 个 getEngine 方法 。 


| 类 内 部 用 this 表示 类 本 身 ， 用 来 访问 类 的 属性 和 方法 。 | 
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定义 的 类 是 一 种 抽象 的 对 象 类 型 ， 只 有 将 类 实例 化 才 会 在 计算 机 中 分 配 空间 。 类 在 实例 化 
时 会 调用 类 中 的 构造 函数 来 初始 化 一 些 属性 值 。 在 TypeScript 中 ,使 用 new 关键 字 来 实例 化 
类 的 对 象 ， 语 法 格式 如 下 : 


var 或 let 对 象 名 = new 类 名 (参数 ...) 


可 以 看 出 ，TypeScript 中 用 new 关键 字 来 实例 化 类 的 对 象 和 C# 非 常 类 似 。 代 码 7-9 给 出 
汽车 类 实例 化 对 象 的 示例 。 


【代码 7-9】 创建 实例 对 象 示例 代码 : car2.ts 


01 class Car { 


02 // 属性 

03 engine:string ="V8 发 动机 "; 
04 // 构造 函数 

05 Constructor (engine:string) { 
06 this.engine = engine; 
07 } 

08 // 方法 

09 getEngine():string { 

10 return this.engine; 

ul } 

hb } 


13 let aodiCar = new Car ("奥迪 V8"); 

14 let bmwCar = new Car(" 宝 马 V8"); 

在 代码 7-9 中 ，01~12 行 声明 了 一 个 Car 类 ， 其 中 05 行 定义 了 一 个 包含 一 个 文本 类 型 参 
数 的 构造 函数 。13~14 行 用 new Car 分 别 创建 了 Car 的 实例 对 象 。 在 实例 化 的 时 候 ， 由 于 构造 
函数 接受 的 是 一 个 文本 类 型 的 参数 ， 因 此 我 们 在 实例 化 时 必须 传 入 一 个 文本 类 型 的 实 参 。 


医改 类 实例 化 时 ， 构 造 函 数 中 实 参 的 个 数 和 类 型 必须 和 形 参 的 个 数 和 类 型 匹配 ， 否 则 会 报错 。 | 


在 创建 对 象 实例 的 时 候 ， 虽 然 对 象 名 前 用 const 关键 字 来 定义 ， 但 是 对 象 中 的 属性 也 是 可 
以 修改 的 。 
7.2.3 ”访问 类 的 属性 和 函数 

一 般 情 况 下 ， 当 类 实例 化 后 ， 就 可 以 对 类 的 实例 对 象 进行 属性 和 方法 访问 了 。 类 的 属性 和 
方法 必须 通过 类 的 实例 对 象 来 访问 。 一 般 来 说 ， 可 以 在 实例 对 象 上 用 符号 .来 访问 属性 和 方法 。 
代码 7-10 给 出 访问 汽车 类 实例 对 象 的 示例 。 
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【代码 7-10】 访问 汽车 类 实例 对 象 示例 代码 : car3 .ts 


01 class Car | 


02 // 属性 

03 engine:string ="V8 发 动机 "; 
04 // 构造 函数 

05 constructor (engine:string) { 
06 this.engine = engine; 
07 } 

08 // 方法 

09 getEngine():string { 

10 return this.engine; 

3 } 

于 } 


13 let aodiCar = new Car ("奥迪 V8"); 
14 console.log(aodiCar.engine); 
ds console.log (aodiCar.getEngine()); 


在 代码 7-10 中 ，13 行 用 new 关键 字 创建 了 一 个 Car 类 实例 对 象 aodiCar ， 通 过 传 入 构造 
函数 的 值 使 实例 对 象 aodiCar 中 的 engine 值 为 "奥迪 V8"。14 行 和 15 行 用 实例 对 象 aodiCar 
访问 类 的 属性 和 方法 ， 如 aodiCar.engine 返回 实例 对 象 aodiCar 的 engine 属性 ， 即 "奥迪 V8"。 


访问 类 的 实例 对 象 的 属性 和 方法 除了 用 符号 .以 外 ， 还 可 以 用 []， 如 aodiCar["engine"] 和 
aodiCar["getEngine"]()。 


7.2.4 类 的 继承 


TypeScript 语言 支持 面向 对 象 编程 中 的 继承 特征 。 换 句 话说 , 我 们 可 以 在 创建 类 的 时 候 继 
承 一 个 已 存在 的 类 ， 这 个 已 存在 的 类 称 为 父 类 ， 继 承 它 的 类 称 为 子 类 。 

类 继承 使 用 关键 字 extends， 子 类 除了 不 能 继承 父 类 的 私有 成 员 (方法 和 属性 ) 和 构造 函 
数 ， 其 他 的 都 可 以 继承 。TypeScript 中 一 次 只 能 继承 一 个 类 ， 不 支持 一 次 继承 多 个 类 ， 但 
TypeScript 支持 多 重 继承 ， 如 A 类 继承 B 类 ， 而 B 类 又 可 以 继承 C 类 。 


类 的 继承 语法 格式 如 下 : 

01 ”class 类 名 extends 父 类 名 { 
02 // 类 数据 成 员 

03 } 


假设 首先 定义 一 个 People 类 ,具有 两 个 属性 , 分 别 是 name 和 age; 再 定义 一 个 构造 函数 ， 
用 来 初始 化 属性 (name 和 age) 和 方法 (分 别 是 walk 和 eat) 。 另 外 ,还 需要 定义 一 个 Student 
类 。 本 质 上 Student 也 是 People， 只 是 多 了 一 些 属性 和 方法 而 已 ， 因 此 可 以 通过 类 继承 来 快速 
实现 Student 类 的 定义 。 代 码 7-11 给 出 类 继承 的 示例 。 
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【代码 7-11】 类 继承 示例 代码 : extends1.ts 


01 class Peoplet 


02 name: string; 

3 age: number; 

04 // 不 允许 多 个 构造 函数 

05 constructor (name:string,age:number) { 
06 this.name = name; 

07 this.age = age; 

08 } 

09 walk() { 

10 console.log(this.name +" walk"); 

Es } 

2 | 

13 console.log(this.name +" eating"); 
14 } 

JS } 

16 class Student extends People{ 

17 clazz: string; 

18 constructor (name: string, age: number, clazz: string) { 
19 // 必 须 包 含 父 类 构造 函数 

20 super (namevage) 

2 this.clazz = clazz; 

2 } 

23 learn() { 

24 console.log(this.name +" learning"); 
25 } 

26 display() { 

2 console.log(JSON.stringify (this)); 
28 } 

29 } 


30 let studentA = new Student ("jack"，17,， "高 三 一 班 "); 
3 studentA.walk(); 

32 studentA.learn(); 

3 studentA.display(); 


在 代码 7-11 中 , 16 行 用 Student extends People 实现 了 Student 类 继承 People 类 。Student 类 
可 以 直接 使 用 父 类 People 中 的 属性 和 方法 。Student 类 自身 定义 了 一 个 clazz 属性 、learn 和 
display 方法 以 及 一 个 构造 函数 。31 行 在 Student 类 实例 对 象 上 直接 调用 walk 方法 ， 即 继承 自 
父 类 People 中 定义 的 方法 。 
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在 类 的 继承 中 ， 子 类 的 构造 函数 必须 包含 父 类 的 构造 函数 ， 调 用 父 类 构造 函数 用 super。 
而 且 ， 在 构造 函数 里 访问 this 的 属性 之 前 一 定 要 调用 super0， 和 否则 编译 器 也 会 提示 错误 。 
这 个 是 TypeScript 强制 执行 的 一 条 重要 规则 。 


TypeScript 中 的 类 只 能 继承 一 个 父 类 , 不 支持 继承 多 个 类 , 但 支持 多 重 继承 。 例如, Student 
类 可 以 继承 People 类 ， 而 HighSchoolStudent 类 又 可 以 继承 Student 类 。 代 码 7-12 给 出 类 的 多 


age: number) { 


+ " eating"); 


age: number, clazz: string) 


+ " learning"); 


age: number, clazz: string) 


重 继承 示例 。 

【代码 7-12】 类 的 多 重 继承 示例 代码 : extends2.ts 
01 class People { 
02 name: string; 
03 age: number; 
04 constructor (name: string, 
05 this.name = name; 
06 this.age = age; 
07 } 
08 walk() { 
09 console.log(this.name + " walk"); 
10 } 
11 eat() { 
12 console.log(this.name 
EE } 
14 } 
5 class Student extends People { 
16 clazz: string; 
17 constructor (name: string, 
18 super (name, age); 
19 this.clazz = clazz; 
20 1 
21 learn() { 
22 console.log (this.name 
23 3 
24 display() { 
2 console.log(JSON.stringify(this)); 
26 }; 
2 } 
28 class HighSchoolStudent extends Student { 
29 clazz: string 
30 constructor (name: string, 
3 和 super (name, age, clazz); 
Eb this.clazz = clazz; 
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33 }; 

34 // 高 考 

35 goNCEE() { 

36 console.log(this.name + " take NCEE"); 
37 }; 

38 } 


39 let studentA = new HighSchoolStudent ("jack"，17，" 高 三 一 班 ") ; 
40 studentA.walk(); 

41 studentA.learn(); 

42 studentA.goNCEE (); 

43 studentA.display(); 


在 代码 7-12 中 ，Student 类 继承 People 类 , 而 HighSchoolStudent 类 继承 Student 类 ， 因 此 
HighSchoolStudent 就 具备 了 Student 类 和 People 类 的 所 有 公有 属性 和 方法 。 虽 然 在 定义 
HighSchoolStudent 类 的 时 候 只 定义 了 clazz 属性 和 goNCEE 方法 ， 但 是 在 39 行 创建 类 实例 对 
象 后 ， 也 可 以 调用 属于 People 类 中 定义 的 walk 方法 ， 也 可 以 调用 Student 类 中 的 learn 方法 。 

在 代码 7-12 中 ， 可 以 对 实例 对 象 进行 类 型 断言 ， 让 子 类 转 成 父 类 的 类 型 。 代 码 7-13 给 出 
类 实例 对 象 进行 类 型 断言 的 示例 。 

【代码 7-13】 类 实例 对 象 进行 类 型 断言 示例 代码 : clazz3.ts 

01 let studentB = studentA as Student; 

02 studentB.display (); 

03 let People = studentA as People; 

04 people.walk (); 

由 于 studentA 是 HighSchoolStudent 类 的 实例 对 象 , 而 HighSchoolStudent 是 Student 的 子 
类 ，Student 类 又 是 People 类 的 子 类 ， 因 此 studentA 对 象 可 以 断言 成 Student 类 型 或 者 People 
类 型 。 通 过 类 型 断言 后 ， 只 能 访问 断言 后 类 型 的 相关 属性 和 方法 。 例 如 ， 在 代码 7-13 中 ，01 
行将 studentA 断言 成 Student 类 型 后 ， 就 只 能 访问 Student 类 的 属性 和 方法 ， 而 不 能 访问 
HighSchoolStudent 类 的 方法 或 属性 了 。 


村 | 类 的 类 型 断言 除了 用 as 外 ， 还 可 以 用 <>。 | 


7.2.5 方法 重 载 


在 TypeScript 中 ， 类 可 以 继承 其 他 类 ， 从 而 获得 父 类 的 属性 和 方法 ， 如 果子 类 也 定义 一 个 
父 类 的 同名 方法 ， 那 么 会 怎么 样 呢 ? 

通过 继承 ， 子 类 可 以 对 父 类 的 方法 进行 重新 定义 ， 这 个 过 程 称 为 方法 的 重 载 (overload ) ， 
最 常用 的 地 方 就 是 构造 器 的 重 载 。 其 中 ，super 关键 字 是 对 父 类 的 直接 引用 ， 该 关键 字 可 以 引 
用 父 类 的 属性 和 方法 。 

这 里 需要 区 分 一 下 重 载 (overload) 和 重 写 (override) 的 概念 。 重 载 是 在 一 个 类 里 面 方法 
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名 字 相同 但 参数 不 同 ， 返 回 类 型 可 以 相同 也 可 以 不 同 。 每 个 重 载 的 方法 〈 或 者 构造 函数 ) 都 必 
须 有 一 个 独一无二 的 参数 类 型 列表 。 

重 写 是 子 类 对 父 类 允许 访问 的 方法 的 实现 过 程 进 行 重新 编写 ， 返回 值 和 形 参 都 不 能 改变 ， 
即 方法 签名 不 变 , 方法 体重 写 。 重 写 的 好 处 在 于 子 类 可 以 根据 需要 定义 特定 于 自己 的 行为 , 从 
而 覆盖 父 类 的 方法 。 代 码 7-14 给 出 类 继承 中 的 方法 重 写 示 例 。 


【代码 7-14】 类 继承 中 的 方法 重 写 示 例 代码 : clazzoverride.ts 


01 class People { 


02 name: string; 

03 age: number; 

04 constructor (name: string, age: number) { 
05 this.name = name; 

06 this.age = age; 

07 } 

08 walk() { 

09 console.log(this.name + " walk"); 

10 } 

a eat() { 

a console.log(this.name + " eating"); 
13 } 

14 } 

U7 class Student extends People { 

16 clazz: string; 

lr/ //name: number; // 不 能 重新 定义 不 兼容 的 属性 类 型 
18 constructor (name: string, age: number, clazz: string) { 
19 super (name, age); 

20 this.clazz = clazz; 

2 } 

22 // 方 法 重 载 

23 walk() { 

24 super.eat (); 

pe console.log("walk after eating"); 

26 . 

27 } 


28 let studentA = new Student ("jack"，17，" 高 三 一 班 ") ; 
29 studentA.walk(); 


在 代码 7-14 中 , Student 类 继承 自 People 类 ,其 中 23 行 定义 了 一 个 与 父 类 同名 的 方法 walk， 
在 该 方法 体 中 ， 用 super.eat() 先 调用 People 类 中 的 eat 方法， 然后 调用 console.log("walk after 
eating") 语 句 。 此 方法 对 父 类 中 的 walk 进行 了 重 写 。 当 28 行 创建 一 个 Student 类 对 象 实例 
studentA 后 ， 在 29 行 调用 studentA.walk 方法 时 ， 实 际 上 就 是 调用 的 Student 类 中 定义 的 walk 
方法 ， 而 不 是 父 类 People 类 中 的 walk 方法 。 


223 


TypeScript 实战 


注意 上 面 注释 掉 的 17 行 代码 ， 在 子 类 中 如 果 定 义 了 一 个 与 父 类 同名 的 属性 ， 那 么 属性 的 
类 型 必须 兼容 。 换 名 话说 ，People 类 中 的 name 属性 是 字符 类 型 的 ， 那 么 Student 类 中 的 name 
就 不 能 定义 为 数值 类 型 的 ， 但 是 可 以 是 any 类 型 的 。 


| 在 类 的 继承 中 , 子 类 对 父 类 方法 进行 重 写 ,必须 签名 一 致 。 如 果 在 子 类 中 定义 一 个 与 父 类 
[ 同名 的 方法 ， 参 数 不 一 致 ， 就 会 报错 ( 重 载 除 外 ) 。 


前 面 提 到 , 类 中 的 构造 函数 只 能 有 一 个 , 那么 如 何 实现 不 同 的 构造 函数 呢 ? 我们 能 不 能 实 
现 一 个 类 的 构造 函数 ， 既 可 以 传 入 一 个 参数 ,也 可 以 传 入 多 个 参数 呢 ? 答案 是 肯定 的 。 可 以 在 
构造 函数 中 使 用 可 选 参数 实现 对 构造 函数 的 重 载 。 代 码 7-15 给 出 通过 可 选 参数 的 方式 对 类 构 
造 函 数 进行 重 载 的 示例 。 
【代码 7-15】 类 构造 函数 重 载 示例 代码 : clazzoverload.ts 


01 class People { 


02 name: string; 

03 age: number; 

04 constructor (name: string, age?: number) { 
05 this .name = name; 

06 this.age = age; 

07 

08 walk (mile?: string) { 

09 if (mile === undefined) { 

10 console.log(this.name + " walk"); 

11 li 

12 else { 

hei console.log(this.name + " walk " + mile); 
14 } 

1 } 

16 eat (food?: string) { 

gly/ if (food === undefined) { 

18 console.log(this.name + " eating"); 
19 } 

20 else { 

21 console.log(this.name + " eating " + food); 
22 } 

23 } 

24 } 


25 let p = new People("Uack"，31) 7 
26 P.eat("food") 7 

人 P.walk("15km") 7 

28 let p2 = new People("Uack") 

29 P.eat() 7 
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30  p-.walk(); 


在 代码 7-15 中 ,通过 可 选 参数 的 方式 对 People 类 中 的 构造 函数 以 及 walk 和 eat 方法 进行 
了 方法 重 载 。25 行 和 28 行 分 别 创建 了 一 个 People 类 对 象 实例 p 和 p2， 但 是 传 入 构造 函数 的 
参数 个 数 不 同 ， 从 而 说 明 构造 函数 是 实现 重 载 的 。26 行 和 29 行 同样 调用 对 象 上 的 eat 方法 ， 
一 个 传 入 参数 ， 一 个 不 需要 传 入 参数 ， 都 可 以 正确 运行 。 


必 寺 在 类 方法 重 载 中 , 方法 的 返回 值 也 可 以 不 同 ， 例 如 可 以 结合 可 选 参数 的 传 入 情况 分 别 返 回 
不 同 的 值 。 本 质 上 ， 如 果 一 个 分 支 返 回 string 类 型 的 值 ， 一 个 返回 number 类 型 的 值 ， 那 
| 么 此 方法 的 返回 类 型 为 string | number 类 型 。 


7.2.6 ”装饰 器 


Spring Boot 里 面 会 有 很 多 类 似 @Autowired 的 注解 ， 用 @ 符 号 作为 前 级 ， 可 以 在 类 、 方 法 
和 字段 上 进行 标注 。Spring Boot 的 注解 可 以 极 大 地 简化 代码 复杂 度 ， 提 高 代码 的 可 读 性 。 

Spring Boot 框架 在 运行 时 会 自动 解析 这 些 注解 ， 从 而 按照 内 置 规则 进行 自动 化 的 配置 ， 
比 Spring 中 需要 大 量 的 XML 配置 方便 了 很 多 。 

在 TypeScript 中 ， 在 一 些 场景 下 ， 如 果 需 要 类 似 Spring Boot 中 的 注解 功能 对 类 及 其 成 员 
进行 标注 ， 就 需要 用 到 装饰 器 (decorators) 。 装 饰 器 为 我 们 在 类 的 声明 及 成 员 上 通过 元 编程 
语法 添加 标注 提供 了 一 种 方式 。 

虽然 ES6 类 中 的 装饰 器 目前 还 处 在 建议 征集 的 第 二 阶段 ， 但 是 TypeScript 中 已 经 作为 一 
项 实验 性 特性 给 予 支持 。 从 https://github.com/tc39/proposal-decorators 中 可 以 查看 ES6 类 中 的 
装饰 器 最 新 阶段 。 


医改 装饰 器 是 一 项 实验 性 特性 ， 在 未 来 的 版 本 中 可 能 会 发 和 改变。 | 


若 要 启用 实验 性 的 装饰 器 特性 ， 则 必须 开启 experimentalDecorators 编译 器 选项 。 在 
tsconfig.json 文件 里 启用 装饰 器 特征 的 代码 如 下 : 


01 { 

02 "compilerOptions": { 

03 "target": "ESS5", 

04 "experimentalDecorators": true 
05 

06 二 


装饰 器 是 一 种 特殊 类 型 的 声明 ， 能 够 被 附加 到 类 声明 、 类 方法 和 属性 或 方法 参数 上 。 装 
饰 器 使 用 @expression 这 种 形式 来 表示 。expression 求 值 后 必须 为 一 个 函数 ， 它 会 在 运行 时 被 
调用 ， 被 装饰 的 声明 信息 作为 参数 传 入 。 如 果 有 一 个 装饰 器 @table， 就 需要 定义 一 个 table 函 
数 ， 同 时 这 个 函数 接受 一 个 参数 target 作为 被 装饰 的 声明 信息 。 
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装饰 器 分 为 类 装饰 器 、 方 法 装饰 器 、 访 问 器 装饰 器 、 属 性 装饰 器 和 参数 装饰 器 。 这 里 只 简 
单 介绍 一 下 类 装饰 器 、 方 法 装饰 器 和 属性 装饰 器 。 若 对 其 他 装饰 器 感 兴趣 ， 则 可 到 TypeScript 
官网 上 进行 学 习 。 

类 装饰 器 在 类 声明 之 前 进行 声明 ,一 般 来 说 是 在 类 名 上 添加 装饰 器 。 当 然 , 也 可 以 将 同一 
行 放 于 class 关键 字 之 前 ， 类 装饰 器 和 class 之 间 用 空格 分 隔 。 类 装饰 器 应 用 于 类 构造 函数 ， 可 
以 用 来 监视 、 修 改 或 蔡 换 类 定义 。 根 据 官 网 的 说 法 ， 类 装饰 器 不 能 用 在 声明 文件 中 (.d.ts)， 也 
不 能 用 在 任何 外 部 上 下 文中 《比如 declare 的 类 ) 。 

类 装饰 器 表达 式 会 在 运行 时 当 作 函数 被 调用 , 类 的 构造 函数 作为 回调 函数 中 唯一 的 参数 进 
行 传 入 。 如 果 类 装饰 器 返回 一 个 构造 函数 , 那么 它 会 使 用 返回 的 构造 函数 来 蔡 换 类 声明 中 的 构 
造 函 数 。 代 码 7-16 给 出 一 个 简单 的 类 装饰 器 的 示例 。 


【代码 7-16】 类 装饰 器 示例 代码 : decoratordemots 


01 @log 

02 class Hello { 

03 greeting: string; 

04 constructor (message: string) { 

05 this.greeting = message; 

06 } 

07 greet() { 

08 return "Hello，" + this.greeting; 
09 } 

10 } 


Em function log(constructor: Function) { 


这 Console .1og ("=========start===: 

console.log("call constructor :"+ 
constructor.prototype.constructor.name); 

14 console .1og ("=========enNd===========")} 

15 } 


16 let hello = new Hello("TypeScript!"); 
7 hello.greet (); 


在 代码 7-16 中 ， 类 装饰 器 @log 要 在 类 Hello 之 前 进行 声明 ， 一 般 放 于 类 名 上 一 行 ， 当 然 
也 可 以 放 于 同一 行 , 如 @log class Hello。 类 装饰 器 是 一 个 函数 , 函数 名 为 类 装饰 器 去 掉 @ 符 号 。 
在 11 行 中 声明 了 一 个 函数 log, 它 接 受 唯一 一 个 参数 , 这 个 参数 传 入 的 是 类 的 构造 函数 。12~14 
行 只 是 简单 地 记录 调用 构造 函数 的 开始 和 结束 ， 以 及 中 间 输 出 构造 函数 的 名 字 ， 即 类 名 。 

为 了 运行 上 述 代码 ， 建 议 到 Visual Studio Code 中 进行 操作 。 首 先 ， 装 饰 器 特征 必须 开启 
编译 器 选项 experimentalDecorators， 否 则 编辑 器 会 提示 错误 。 当 在 tsconfig.json 中 开启 装饰 器 
特征 后 ， 我 们 就 可 以 用 tsc 命令 来 将 代码 7-16 中 的 decoratordemo.ts 代码 生成 对 应 的 
decoratordemo.js 文件 了 。 这 里 为 了 方便 测试 ， 新 建 一 个 index.html 文件 ， 其 中 将 生成 的 
decoratordemo.js 文件 进行 引入 ， 这 样 就 可 以 在 浏览 器 控制 台中 看 出 代码 7-16 最 终 运行 的 结果 
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了 。 代 码 7-17 给 出 index.html 的 示例 。 
【代码 7-17】 index.html 示例 代码 : index.html 


01 <!DOCTYPE html> 
02 <html lang="en"> 


03 <head> 

04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>test</title> 

08 </head> 

09 <body> 

10 <script src="decoratordemo.js"></script> 


Tl </body> 

2 </html> 

方法 装饰 器 声明 在 一 个 方法 的 声明 之 前 〈 在 方法 名 上 添加 装饰 器 ) 。 它 会 被 应 用 到 方法 的 
属性 描述 符 上 ， 可 以 用 来 监视 、 修 改 或 者 蔡 换 方法 定义 。 方 法 装饰 器 表达 式 会 在 运行 时 当 作 函 
数 被 调用 ， 传 入 下 列 3 个 参数 : 

@ ”对 于 静态 成 员 来 说 是 类 的 构造 函数 ， 对 于 实例 成 员 来 说 是 类 的 原型 对 象 。 

@ 成 员 的 名 字 。 

日 ”成 员 的 属性 描述 符 

代码 7-18 给 出 一 个 方法 装饰 器 的 示例 。 由 于 当前 声明 的 类 都 是 在 全 局 环境 下 ， 因 此 为 了 
防止 命名 冲突 ， 这 里 将 类 名 改 成 Hello2 。 


【代码 7-18】 方法 装饰 器 示例 代码 : decoratordemo2.ts 


01 class Hello2 { 


02 greeting: string; 

03 constructor (message: string) { 

04 this.greeting = message; 

05 } 

06 @writable (false) 

07 greet() { 

08 return "Hello, " + this.greeting; 

09 : 

10 } 

ll function writable(value: boolean) { 

bl return function (target: any, propertyKey: string, descriptor: 
PropertyDescriptor) { 

13 Console . 1og ("=========Start=========")} 

14 console.1og(PropertyKey) ; //greet 
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15 console.1log (target); // 原 型 

16 descriptor.writable = value; //false 
Br/ console .1og ("========end=========")} 

18 ]7 

19 } 


20 let hello2 = new Hello2 ("TypeScript!"); 
交 生 hello2.greet (); 


在 代码 7-18 中 ，06 行 在 方法 greet0 定 义 之 上 声明 了 一 个 @writable(false) 的 方法 装饰 器 ， 
当 调 用 此 方法 的 时 候 ， 会 自动 调用 @writable 方法 装饰 器 所 定义 的 函数 writable。 在 11 行 定义 
了 函数 writable。 它 的 函数 体内 返回 一 个 函数 ， 返回 的 函数 有 3 个 参数 。 第 一 个 是 target 参数 ， 
对 于 静态 成 员 来 说 是 类 的 构造 函数 ， 对 于 实例 成 员 来 说 是 类 的 原型 对 象 。 这 里 是 实例 成 员 ， 因 
此 target 参数 传 入 的 是 类 的 原型 对 象 。 第 二 个 参数 propertyKey 表示 的 是 成 员 的 名 字 ， 也 就 是 
方法 名 。 第 三 个 参数 为 成 员 的 属性 描述 符 PropertyDescriptor， 它 有 内 置 的 一 些 属性 ， 这 里 可 以 
将 方法 装饰 器 传 入 的 参数 value 对 其 PropertyDescriptor 中 的 writable 属性 进行 赋值 。 


| 如 果 在 tsconfigjson 中 将 项 目 代码 输出 目标 版 本 target 属性 设置 为 小 于 ES5， 那 么 属性 描 
要 述 符 将 会 是 undefined。 因 此 ,在 利用 装饰 器 特征 的 情况 下 , 至 少将 代码 输出 目标 版 本 target 
| 属性 设置 为 ES5。 


同样 的 ， 这 里 为 了 方便 测试 , 新 建 一 个 index2.html 文件 ， 其 中 将 生成 的 decoratordemo2.js 
文件 进行 引入 ,这样 就 可 以 在 浏览 器 控制 台中 看 出 代码 7-18 最 终 运行 的 结果 了 。 代 码 7-19 给 
出 index2.html 的 示例 。 
【代码 7-19】 index2.html 示例 代码 : index2.html 


01 <!DOCTYPE html> 
02 <html lang="en"> 


03 <head> 

04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>test</title> 

08 </head> 

09 <body> 

10 <script src="decoratordemo2.js"></script> 


本 于 </body> 

2 </html> 

最 后 介绍 一 下 属性 装饰 器 。 属性 装饰 器 在 类 中 属性 声明 之 前 进行 声明 。 属性 装饰 器 不 能 用 
在 声明 文件 (.d.ts) 或 者 任何 外 部 上 下 文 〈 比 如 declare 的 类 ) 里 。 属 性 装饰 器 表达 式 会 在 运 
行 时 当 作 函数 被 调用 ， 可 传 入 下 列 2 个 参数 : 
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@ ”对 于 静态 成 员 来 说 是 类 的 构造 函数 ， 对 于 实例 成 员 来 说 是 类 的 原型 对 象 。 
@ 成 员 的 名 字 。 


各 属性 描述 符 不 会 作为 参数 传 入 属性 装饰 器 ， 与 TypeScript 如 何 初始 化 属性 装饰 器 有 关 。 因 
L 此 ， 属 性 描述 符 只 能 用 来 监视 类 中 是 否 声明 了 某 个 名 字 的 属性 。 


在 比较 高 级 的 装饰 器 应 用 场景 中 ， 需 要 用 到 反射 进行 元 数据 编程 。 要 想 在 TypeScript 中 获 
取 类 的 相关 元 数据 信息 ， 需 要 安装 一 个 reflect-metadata 库 ， 可 以 用 npm 命令 进行 安装 。 


npm install reflect-metadata 


安装 成 功 后 , 首先 用 import 导入 这 个 库 , 然后 就 可 以 在 ts 文件 中 使 用 Reflect 对 象 来 获取 
相关 元 数据 信息 了 。 代 码 7-20 给 出 属性 装饰 器 的 示例 。 
【代码 7-20】 属性 装饰 器 示例 代码 : decoratordemo3.ts 


01 import "reflect-metadata"; 
02 class Hello3 { 


03 @logType 

04 greeting: string; 

05 constructor (message: string) { 

06 this.greeting = message; 

07 } 

08 greet() { 

09 return "Hello, " + this.greeting; 

10 } 

3 } 

be function logType (target : any, key : string) { 
a El var t = Reflect.getMetadata("design:type", target, key); 
14 console.log(“${key} type: ${t.name}); 

5 1 


16 let hello3 = new Hello3("TypeScript!"); 
3 hello3.greet (); 


关于 reflect-metadata 库 的 详细 说 明 可 在 https://www.npmjs.com/package/reflect-metadata 网 
站 上 进行 查看 ， 这 里 不 再 痪 述 。 在 代码 7-20 中 ， 在 属性 greeting 上 声明 了 一 个 @logType 属性 
装饰 器 。 这 个 装饰 器 对 应 一 个 函数 logType， 它 接受 2 个 参数 。 第 一 个 参数 是 target， 对 于 静 
态 成 员 来 说 是 类 的 构造 函数 , 对 于 实例 成 员 来 说 是 类 的 原型 对 象 ， 这 里 是 原型 对 象 。 第 二 个 参 
数 key 对 应 的 是 成 员 的 名 称 ， 也 就 是 属性 的 名 称 greeting。13 行 Reflect.getMetadata 方法 将 获 
取 对 象 或 属性 原型 链 上 元 数据 键 的 元 数据 值 。 其 中 "design:type" 是 元 数据 键 metadataKey, 元 数 
据 键 还 有 "design:paramtypes" 和 "design:properties" 等 。"design:type" 返 回 属性 greeting 设计 时 的 
类 型 ， 也 就 是 string。 

这 里 在 decoratordemo3.ts 文件 中 使 用 了 import 语法 ,在 生成 对 应 的 decoratordemo3.js 文件 
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时 会 有 require("reflect-metadata") 等 相关 语句 , 可 以 手动 将 reflect-metadata 库 中 对 应 的 Reflectjs 
文件 进行 导入 。 因 此 , 将 生成 的 decoratordemo3.js 文件 中 的 require("reflect-metadata") 注释 掉 ， 
如 图 7.3 所 示 。 
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15 Object. defineProperty(exports, " esModule", { value: true }); 
16 //require("reflect-metadata"); 

17 var Hello3 = /** @class */ (function() { 

18 function Hello3 (Msied) { 

19 | this.greeting = messigel; 

26 } 

21 Hello3.prototype.greet = function() { 

22 return "Hello, " + this.greeting; 

23 把 

24 __decorate([ 

25 logType, 

26 __ metadata( "design:type", String) 

27 ], Hello3.prototype, "greeting", void 8); 
28 return Hello3; 

29 7}0); 


图 7.3 注释 require("reflect-metadata") 截 图 界面 


另外 , 还 需要 一 个 exports 对 象 , 这 个 可 以 简单 地 通过 var exports = 人 语句 创建 一 个 exports 
对 象 。 这 里 为 了 方便 测试 ， 新 建 一 个 index3.html 文件 ， 其 中 将 生成 的 decoratordemo3.js 文件 
和 Reflectjs 文件 进行 引入 ， 这 样 就 可 以 在 浏览 器 控制 台中 看 出 代码 7-20 最 终 运 行 的 结果 了 。 
代码 7-21 给 出 index3.html 的 示例 。 


【代码 7-21】 index3.html 示例 代码 : index3.html 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
a 
12 
3 
14 
45 
16 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>test</title> 
</head> 
<body> 
<script> 
var exports = {}; 
</script> 
<script src="node modules/reflect-metadata/Reflect.js"></script> 
<script src="decoratordemo3.js"></script> 
</body> 
</html> 
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引入 js 文件 要 注意 顺序 ， 由 于 decoratordemo3.js 文件 是 依赖 Reflectjs 库 的 ， 因 此 必须 将 
Reflectjs 置 于 decoratordemo3.js 文件 之 上 ， 否 则 会 报错 。 这 也 是 将 var exports= ;语句 放 
| 于 decoratordemo3.js 之 上 的 原因 。 


7.2.7 static 静态 关键 字 

前 面 提 到 , 类 中 的 属性 和 方法 一 般 都 需要 通过 类 的 实例 化 对 象 才能 访问 。 但 是 如 果 将 类 中 
的 属性 和 方法 定义 成 静态 ,就 可 以 在 没有 实例 化 对 象 的 情况 下 直接 通过 类 名 来 调用 静态 属性 和 
静态 方法 了 。 

static 关键 字 用 于 定义 类 的 数据 成 员 〈 属 性 和 方法 ) 为 静态 的 。 静 态 变 量 存储 在 内 存 中 静 
态 存储 区 ， 只 要 类 被 加 载 ， 即 可 分 配 空间 。 代 码 7-22 给 出 一 个 类 的 静态 成 员 的 示例 。 
【代码 7-22】 类 的 静态 成 员 示例 代码 : staticdemo.ts 


01 class LogUtilt{ 


02 static version = "1"7 

03 author: "jack"; 

04 static log(msg:string) { 

05 console.1log (msg); 

06 } 

07 } 

08 console.log (LogUtil.version); at lls 


09 //console.log (LogUtil.author); // 无 法 访问 

10 ”LogUtil.1og ("静态 方法 调用 "); 

在 代码 7-22 中 ,声明 了 一 个 LogUtil 类 , 其 中 有 一 个 静态 属性 version 和 一 个 静态 方法 log 。 
08 行 和 10 行 直接 通过 类 名 调用 了 类 LogUtil 中 的 静态 属性 version 和 静态 方法 log， 都 可 以 正 
常 运行 ， 但 是 如 果 用 09 行 的 类 访问 非 静 态 属 性 author 就 会 报错 。 


一 static 不 能 在 elass 前 进行 修 侯 ， 也 不 能 在 构造 函数 上 进行 修 饰 。 | 


7.2.8 instanceof 运算 符 


在 TypeScript 中 ,判断 一 个 变量 的 类 型 经 常会 用 typeof 运算 符 。 在 使 用 typeof 运算 
符 时 ， 对 于 基本 数据 类 型 〈 如 数值 类 型 和 字符 类 型 等 ) 都 能 按照 预期 执行 ， 但 是 对 于 判断 
一 个 引用 类 型 的 变量 ， 则 会 出 现 一 个 问题 ， 就 是 无 论 引 用 的 是 什么 类 型 的 对 象 ， 它 都 返回 
"object" 值 。 

在 TypeScript 中 ， 运 算 符 instanceof 可 以 解决 这 个 问题 。instanceof 运算 符 与 typeof 运算 
符 相 似 ， 用 于 识别 对 象 的 类 型 。 与 typeof 方法 不 同 的 是 ，instanceof 方法 要 求 开 发 者 明确 指 
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定 对 象 为 某 特定 类 型 。instanceof 运算 符 用 于 判断 对 象 是 否 是 指定 的 类 型 ， 如 果 是 就 返回 true， 
否则 返回 false。 代 码 7-23 给 出 一 个 instanceof 运算 符 判 断 的 示例 。 
【代码 7-23】 instanceof 运算 符 示例 代码 : instanceofdemo.ts 


01 class Peoplel 


02 static static ID = "12345"; 

03 name: string; 

04 age: number; 

05 constructor (name:string,age:number) { 
06 this.name = name; 

07 this.age = age; 

08 和 

09 walk() { 

10 console.log(this.name +" walk"); 
3 y 

之 eat() { 

HE] console.log(this.name +" eating"); 
14 } 

5 } 


16 let people = new People("Jack", 18); 
ly let isInstance = People instanceof People; 
18 console.log(isInstance); //true 


在 代码 7-23 中 , 16 行 用 类 People 的 构造 函数 声明 实例 化 了 一 个 对 象 people, 17 行 用 people 
instanceof People 来 判断 这 个 对 象 是 否 为 People 类 型 的 ， 返 回 的 结果 是 true。 


7.2.9 类 成 员 的 可 见 性 

前 面 在 定义 类 的 成 员 时 并 未 对 成 员 的 可 访问 性 进行 定义 , 在 默认 情况 下 ，TypeScript 中 的 
类 成 员 都 是 public， 当 然 也 可 以 明确 地 将 成 员 标记 成 public， 代 表 公 共 的 属性 和 方法 ， 可 以 直 
接 被 外 界 进 行 访问 。 

在 TypeScript 中 , 可 以 使 用 访问 控制 符 来 保护 对 类 中 属性 和 方法 的 访问 。 访 问 控制 符 的 类 
型 有 : 

@ public (默认 ) : 公有 ， 可 以 在 任何 地 方 被 访问 。 

@ protected: 受 保 护 ， 可 以 被 其 自身 以 及 其 子 类 访问 。 

@ private : 私有 ， 只 能 被 其 定义 所 在 的 类 访问 。 

代码 7-24 给 出 一 个 类 成 员 的 可 见 性 的 示例 。 
【代码 7-24】 类 成 员 的 可 见 性 示例 代码 : clazzaccess.ts 


01 class People { 
02 name: string; 
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03 Private age: number; 

04 constructor (name: string, age: number) { 
05 this.name = name; 

06 this.age = age; 

07 } 

08 protected walk() { 

09 console.log(this.name + " walk"); 

10 下 

11 Private eat() { 

12 console.log(this.name + " eating"); 

3 

14 Public getage() { 

| return this.age; 

16 } 

了 了 } 

18 class Student extends People { 

9 Private clazz: string; 

20 constructor (name: string, age: number, clazz: string) { 
21 super (name, age); 

2 this.clazz = clazz; 

23 //this.age = 2; //private 子 类 无 法 访问 
24 1 

| Public learn() { 

26 //super.eat (); //private 子 类 无 法 访问 
27 super.walk (); //protected 子 类 可 以 访问 
28 console.log(this.name + " learning"); 
29 } 

30 Protected display() { 

= console.1log(JSON.stringify(this)); 

本 有 } 

33 } 

34 let studentA = new Student ("jack"，17，" 高 三 一 班 ") ; 
35  //studentA.walk(); //protected 无 法 访问 
36 studentA.getAge(); //public 可 以 访问 

32 studentA.learn(); //public 可 以 访问 


38 //studentA.display(); //protected 无 法 访问 


在 代码 7-24 中 , People 类 中 定义 了 一 个 private 修饰 的 属性 age, 可 以 在 People 类 内 部 使 
用 ， 不 能 在 其 他 地 方 进行 访问 ， 私 有 的 属性 age 在 子 类 Student 中 也 无 法 访问 ， 如 23 行 所 示 。 
08 行 在 People 类 中 定义 了 一 个 protected 修饰 的 walk 方法 。walk 方法 可 以 在 自身 或 者 子 类 中 
进行 访问 ， 但 是 protected 和 private 一 样 ， 无 法 在 People 类 的 实例 化 对 象 上 进行 访问 。 

在 类 中 的 属性 和 方法 上 加 上 访问 修饰 符 ， 可 以 更 好 地 对 数据 成 员 进 行 封装 。 一 般 情况 下 ， 
我 们 尽量 少 暴露 公有 的 属性 和 方法 ， 只 公开 必须 对 外 提供 服务 的 方法 或 属性 。 这 样 当 我 们 修改 
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私有 变量 或 方法 时 ， 对 于 外 部 使 用 公有 方法 的 用 户 而 言 是 没有 什么 感觉 的 。 就 像 汽 车 一 样 , 我 
们 只 接触 到 少数 几 个 人 车 交互 的 操作 ,比如 油门 和 方向 盘 等 , 而 无 须 明白 汽车 发 动机 内 部 是 如 
何 工作 的 。 

最 后 , 如 果 在 构造 函数 里 面 的 参数 用 public 等 访问 修饰 , 那么 可 以 省 略 在 类 中 显 式 地 声明 
一 个 同名 的 属性 。 代 码 7-25 给 出 构造 函数 中 参数 用 public 修饰 符 的 示例 。 


【代码 7-25】 构造 函数 中 参数 用 public 修饰 符 的 示例 代码 : clazzconstructor.ts 


01 class MyEle { 


02 constructor (public height: number, private width: number) { 
03 this.height = height; 

04 this.width = width; 

05 

06 tostring() { 

07 return JSON .stringify(this) 7? 

08 下 

09 } 


10 let e = new MyEle(200, 300); 
| console.log(e.height); 
kb //console.log(e.width); // 私 有 无 法 访问 


在 代码 7-25 中 ,02 行 用 public 和 private 分 别 修饰 了 height 和 width 两 个 形 参 。 此 时 会 自 
动 创 建 同名 的 属性 ， 属 性 名 和 类 型 以 及 可 访问 符 和 构造 函数 中 的 参数 一 致 。 因 此 ，11 行 可 以 
调用 MyEle 实例 化 对 象 e 的 属性 height (公有 属性 ) ， 而 不 能 访问 私有 属性 width。 


my up 7 
ZX 。< 接口 


接口 是 一 系列 抽象 属性 或 方法 的 声明 ,接口 只 给 出 属性 或 方法 的 约定 ,并 不 给 出 具体 实现 。 
具体 的 实现 逻辑 可 以 交 由 接口 的 实现 类 来 完成 。 借 助 接口 ,我们 无 须 关心 实现 类 的 内 部 实现 细 
节 就 可 以 用 接口 中 定义 的 属性 或 方法 对 某 个 实现 类 进行 属性 或 方法 调用 。 


7.3.1 声明 接口 


TypeScript 的 核心 原则 之 一 是 对 值 所 具有 的 结构 进行 类 型 检查 。 接口 的 作用 就 是 为 这 些 类 
型 命名 或 定义 契约 。TypeScript 中 接口 定义 的 基本 语法 如 下 : 


01 ”interface 接口 名 { 
02 // 属 性 或 方法 定义 
03 } 


接口 用 关键 字 interface 声明 , 接口 名 必须 满足 标识 符 命名 规则 。 接口 中 只 能 包含 抽象 的 方 
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法 或 属性 ， 不 能 有 具体 的 实现 细节 。 代 码 7-26 给 出 一 个 接口 的 示例 。 
【代码 7-26】 接口 示例 代码 : IPeople.ts 


01 interface IPeople{ 


02 name: string; 
03 age: number; 

04 walk(); 

05 eat (a: string); 
06 


在 代码 7-26 中 ,声明 了 一 个 接口 IPeople， 里 面 定 义 了 两 个 属性 name 和 age， 同 时 定义 两 
个 方法 。 这 两 个 方法 只 包含 方法 签名 ， 不 包含 方法 实现 。 


二 接口 中 的 属性 也 不 能 有 初始 化 值 。 同 时 也 不 允许 加 public 等 访问 修饰 符 。 | 


接口 中 的 属性 或 方法 可 以 定义 为 可 选 的 ， 如 果 将 该 接口 中 的 属性 和 方法 用 可 选 符号 ?限定 
为 可 选 的 情况 下 ， 接 口 的 实现 中 可 选 属性 或 者 方法 就 可 以 不 实现 。 代 码 7-27 给 出 了 接口 可 选 
属性 和 方法 的 示例 。 


【代码 7-27】 接口 可 选 属性 和 方法 示例 代码 : IConfigs.ts 


01 interface IConfigs { 


02 name: string; 

03 height?: number, 

04 width?: number; 

05 learn? (); // 可 选 方法 

06 

07 function load(config: IConfigs) { 
08 console.log (config.name); 

09 } 


10 load({ name: "div", height: 180 }); 
sl load({ name: "svg", height: 180, width: 200 }); 


2 load({ 

13 name: "html", 

14 height: 180, 

5 width: 200, 

16 learn: () => { console.log("learning") } 
17 Ws 


在 代码 7-27 中 ， 声 明了 一 个 接口 IConfigs， 其 中 除了 属性 name 外 ， 其 他 的 属性 和 方法 都 
用 ?声明 成 可 选 的 ， 注 意 03 行 的 行 末尾 ， 用 逗号 〈,) 分 隔 ， 也 就 是 说 接口 中 的 属性 和 方法 既 
可 以 用 分 号 〈;) 分 隔 ， 也 可 以 用 去 号 〈,) 分 隔 。 在 换行 的 情况 下 ， 行 末 也 可 以 不 加 分 隔 符号 。 
07~09 行 声明 了 一 个 函数 load， 它 的 参数 类 型 为 IConfigs。 
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10 行 和 11 行 分 别 调用 函数 ， 传 入 一 个 对 象 实 参 ， 可 以 发 现 width 属性 为 可 选 的 ， 且 learn 
方法 也 是 可 选 的 。 因 此 实 参 中 是 否 有 width 值 都 是 合法 的 。 
接口 还 可 以 继承 自 类 ， 代 码 7-28 给 出 接口 继承 类 的 示例 。 
【代码 7-28】 接口 继承 类 示例 代码 : IConfigs2.ts 


01 class Rect { 


02 height: number = 100; 

03 width: number = 200; 

04 learn?() { 

05 console.log("learning"); 

06 

07 } 

08 interface IConfigs extends Rect { 

09 name: string; 

10 } 

3 function load(config: IConfigs) { 

12 console.log (config.name); 

13 //console.log(config.learn()); //config.learn is not a function 
14 } 

EU //load({ name: "div", height: 180 }); // 错 误 缺 少 width 


16 load({ name: "svg", height: 180, width: 200 }); 


在 代码 7-28 中 ， 先 定义 了 一 个 类 Rect， 在 06 行 声 明 的 接口 IConfigs 继承 了 Rect 类 。 因 
此 ，IConfigs 也 就 拥有 了 类 Rect 的 属性 width 和 height。15 行 调用 函数 load 的 时 候 ， 并 未 传 
入 height 属性 ， 报 错 。 

另外 需要 注意 的 是 ， 类 Rect 中 定义 了 一 个 方法 leam， 是 可 选 的 。 这 样 虽然 在 编译 阶段 可 
以 调用 config.learn() 方 法 , 但 是 在 运行 时 会 报错 , 说 config.learn 不 是 一 个 函数 , 如 13 行 所 示 。 

TypeScript 中 不 允许 一 次 继承 多 个 类 ， 但 可 以 实现 多 个 接口 。 类 实现 接口 用 关键 字 
implements 来 表示 。 代 码 7-29 给 出 了 类 实现 多 个 接口 的 示例 。 

【代码 7-29】 类 实现 多 个 接口 示例 代码 : IConfigs3.ts 


01 interface IConfigs { 


02 height: number; 

03 width: number; 

04 } 

05 interface IBase { 

06 id: string; 

07 name: string; 

08 tostring(): string; 

09 : 

10 class MyElement implements IConfigs, IBase { 
了 height: number = 200; 
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12 width: number = 300; 

13 de String 

14 name: string = "myele"; 

35 tostring() { 

16 return JSON.stringify(this); 
Ey » 

18 } 


19 let e = new MyElement (); 
20 console.log(e.tostring()); 
//{"height":200,"width":300,"id":"","name":"myele"} 
在 代码 7-29 中 ,首先 定义 了 两 个 接口 IConfigs 和 IBase。10 行 声 明 的 类 MyElement 实现 
了 IConfigs 和 IBase 接口 。 因 此 在 类 MyElement 中 必须 显 式 给 出 接口 中 定义 的 属性 和 方法 。 
接口 中 还 可 以 限定 一 个 属性 为 只 读 的 ， 只 读 属 性 用 关键 字 readonly 来 指定 。 代 码 7-30 给 
出 接口 中 只 读 属 性 readonly 的 示例 。 


【代码 7-30】 接口 中 只 读 属性 readonly 示例 代码 : IReadonly.ts 


01 interface IBase { 


02 name: string; 

03 readonly author:string; //const 不 能 用 
04 tostring(): string; 

05 } 

06 class MyElement implements IBase { 

07 // 只 读 

08 readonly author:string = "Jackwang"; 

09 name: string = "myele"; 

10 constructor (author:string,name:string) { 
11 this.author = author; // 可 以 赋值 
2 this.name = name; 

3 } 

14 tostring() { 

和 三 return JSON .stringify(this) 7 

16 } 

17 } 


18 let e = new MyElement ("jack", "div"); 


19 //e.author = "smith"; // 只 读 属性 ， 但 生成 的 js 文件 可 以 修改 

在 代码 7-30 中 , 03 行 用 关键 字 readonly 在 属性 author 之 前 进行 限定 , 说 明 其 为 只 读 属性 。 
06 行 MyElement 类 实现 了 IBase 接口 ， 可 以 用 readonly author:string = "Jackwang"; 对 只 读 属性 
进行 实现 。 需 要 注意 的 是 ， 这 个 readonly 不 能 省 略 ， 否 则 类 MyElement 中 的 属性 author 将 不 


是 只 读 的 。 


坊 类 中 内 读 必 性 除了 在 构造 本 数 中 可 以 进行 同 信 外 ， 其 他 方法 不 多 许 修改 只 读 属性 的 值 。 | 
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TypeScript 具有 ReadonlyArray<T> 类 型 ， 它 与 Array<T> 相 似 ， 只 是 把 所 有 可 变 方法 进行 
了 移 除 , 因此 可 以 确保 数组 创建 后 不 能 被 修改 .另外 ,只 读 属性 不 能 用 const, 而 只 能 用 readonly。 
最 简单 判断 该 用 readonly 还 是 const 的 方法 是 ， 需 要 限定 的 是 变量 还 是 属性 。 如 果 要 限定 一 个 
变量 则 用 const， 若 要 限定 属性 则 使 用 readonly。 

接口 描述 了 类 的 公共 部 分 , 而 不 是 公共 和 私有 两 部 分 。 接 口 不 会 帮 我 们 检查 类 是 否 具 有 某 
些 私 有 成 员 。 我 们 要 知道 类 是 具有 两 个 类 型 的 : 静态 部 分 的 类 型 和 实例 的 类 型 。 当 用 构造 器 签 
名 去 定义 一 个 接口 并 试图 定义 一 个 类 去 实现 这 个 接口 时 会 得 到 一 个 错误 ,这 是 因为 当 一 个 类 实 
现 一 个 接口 时 ， 只 对 其 实例 部 分 进行 类 型 检查 。 构 造 器 函数 constructor 存在 于 类 的 静态 部 分 ， 
所 以 不 在 检查 的 范围 内 。 


7.3.2 Union Type 和 接口 


接口 中 的 属性 可 以 是 简单 的 数据 类 型 , 如 数值 类 型 或 字符 类 型 , 也 可 以 使 用 复杂 的 数据 类 
型 ， 如 联合 类 型 (Union Type) 。 

例如 ， 我 们 经 常 在 设置 CSS 属性 的 高 度 和 宽度 的 时 候 ， 和 希望 既 可 以 输入 类 似 “200px” 这 
种 带 单位 的 文本 ， 又 可 以 输入 数值 200。 那 么 此 时 这 个 参数 可 以 用 联合 类 型 string | number 来 
声明 类 型 。 代 码 7-31 给 出 接口 中 联合 类 型 的 示例 。 


【代码 7-31】 接口 中 联合 类 型 示例 代码 : IUnionType.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
Ee 
312 
二 
14 
5 
16 


interface IBase { 
name: string; 
width: string | number; 
height: string | number; 
上 
class MyElement implements IBase { 
width:string | number = "200px"; 
height: string | number= "300px"; 
name: string = "myele"; 
constructor (name: string,width:string | number,height:string | number) { 
this.name = name; 
this.width = width; 
this.height = height; 
} 
} 
let e = new MyElement ("div",200,"300px"); 


接口 能 够 描述 各 种 各 样 的 对 象 类 型 。 除了 描述 带 有 属性 的 普通 对 象 外 , 接口 还 可 以 描述 函 
数 类 型 。 为 了 使 用 接口 表示 函数 类 型 , 我们 需要 给 接口 定义 一 个 调用 签名 。 它 就 像 是 一 个 只 有 
参数 列表 和 返回 值 类 型 的 函数 定义 。 参 数列 表 里 的 每 个 参数 都 需要 名 字 和 类 型 。 代 码 7-32 给 
出 接口 表示 函数 类 型 的 示例 。 
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【代码 7-32】 接口 表示 函数 类 型 示例 代码 : IFunction.ts 


01 interface IFunc { 


02 (width: string | number, height: string | number): boolean; 
03 } 

04 class MyElement { 

05 width: string | number = "200px"; 

06 height: string | number = "300px"; 

07 name: string = "myele"; 

08 constructor (name: string, width: string| number, height: string| number) { 
09 this.name = name; 

10 this.width = width; 

11 this.height = height; 

和 区 上 

13 setLocation (func: IFunc): boolean { 

14 return func (this.width，this.height) 7 

1 } 

16 } 


147 let e = new MyElement ("div", 200, "300px"); 
18 e.setLocation(function (w, h) { 


19 console.1log(w); 
20 console.log(h) 
2 return true; 

22 ER 


在 代码 7-32 中 ， 接 口 IFunc 中 声明 了 一 个 函数 的 签名 ， 接 受 两 个 参数 ， 其 类 型 都 是 联合 
类 型 string | number， 且 返回 布尔 类 型 。MyElement 类 中 有 一 个 方法 setLocation， 其 参数 类 型 
为 IFunc， 这 就 表示 其 参数 是 一 个 函数 。 因 此 可 以 将 一 个 函数 实现 作为 参数 传 入 到 方法 
setLocation 中 ， 如 18~22 行 所 示 。 


7.3.3 ”接口 和 数组 


在 日 常 编程 中 , 除了 会 涉及 基本 的 数据 类 型 如 数值 和 字符 类 型 外 , 还 会 经 常 涉及 数组 。 数 
组 在 接口 中 也 是 支持 的 。 代 码 7-33 给 出 接口 中 使 用 数组 的 示例 。 


【代码 7-33】 接口 中 使 用 数组 示例 代码 : IArray.ts 


01 interface IMath { 


02 data: number[]; 

03 sum(data: number[]) : number 
04 } 

05 class MyMath implements IMath { 
06 data: number[] = []; 

07 constructor (data: number[]) { 
08 this.data = data; 
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09 } 

10 sum(_data?: number[]): number { 
“i let ret = 0; 

了 if ( data === undefined) { 

13 for (let i of this.data) { 
14 ret += i; 

本 } 

16 } 

Fr else { 

18 for (let i of data) { 

19 ret += i; 

20 } 

及 } 

2 return ret; 

23 } 

24 } 

25 let e = new MyMath([1, 2, 3]); 

26 console.log(e.sum()); //6 
27 console.log(e.sum([2,3,4])); //9 


在 代码 7-33 中 ， 定 义 了 一 个 接口 IMath， 其 中 有 一 个 数值 类 型 的 数组 data 和 一 个 接受 数 
值 数组 类 型 参数 的 方法 sum。05 行 定义 了 一 个 实现 接口 IMath 的 MyMath 类 。06 行将 data 属 
性 赋值 了 空 数组 。07~09 行 ， 通 过 构造 函数 将 形 参 _data 值 进 行 传 入 并 赋值 给 data 属性 。10 行 
实现 了 接口 IMath 中 的 sum 方法 。 注 意 ， 这 里 的 参数 是 可 选 的 参数 : 若 sum 方法 实 参 不 传 入 ， 
则 用 内 置 的 data 数组 求 和 ; 若 实 参 传 入 了 数组 ， 则 对 传 入 的 数组 进行 求 和 。 


7.3.4 接口 的 继承 

接口 继承 就 是 说 接口 可 以 通过 其 他 接口 来 扩展 自己 。 和 类 一 样 , 接口 也 可 以 相互 继承 。 这 
让 能 够 从 一 个 接口 里 复制 成 员 到 另 一 个 接口 里 ， 可 以 更 灵活 地 将 接口 分 割 到 可 重用 的 模块 里 。 
TypeScript 中 允许 接口 继承 多 个 接口 。 继 承 的 各 个 接口 使 用 逗号 〈,) 分 隔 。 代 码 7-34 给 出 接 
口 的 继承 示例 。 
【代码 7-34】 接口 的 继承 示例 代码 : IExtends.ts 


01 interface IBase{ 


02 color: string; 
03 name: string; 

04 } 

05 interface IShape { 
06 x: number; 

07 Y: number; 

08 l 


09 interface ICircle extends IShape,IBase { 
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10 radius: number; 

站 } 

ks let circle = <ICircle>{}; 
Ek Circle.color = "blue"s; 

14 circle.radius = 10; 


5 circle.x = 0; 


在 代码 7-34 中 ，09 行 ICircle 接口 继承 了 接口 IShape 和 IBase， 因 此 接口 ICircle 中 将 自 
动 创建 接口 IShape 和 IBase 中 所 有 的 属性 和 方法 定义 。 


如 果 接 口 继承 自 多 个 接口 ， 且 多 个 接口 中 有 同名 的 属性 ， 但 是 属性 的 数据 类 型 不 同 ， 就 无 
人 法 同时 继承 。 还 以 代码 7-34 为 例 ， 如 果 JIShape 中 也 有 一 个 name 属性 但 是 类 型 为 number 
| 类 型 ， 这 与 IBase 接口 中 的 string 类 型 的 name 冲突 ， 则 不 能 同时 继承 IShape 和 IBase。 


接口 除了 可 以 继承 接口 外 , 还 可 以 继承 自 类 。 当 接口 继承 了 一 个 类 时 , 它 会 继承 类 的 成 员 
但 不 包括 其 实现 。 接 口 同 样 会 继承 到 类 的 private 和 protected 成 员 。 这 意味 着 当 我 们 创建 一 个 
接口 并 继承 一 个 拥有 私有 或 受 保护 的 成 员 类 时 ， 这 个 接口 只 能 被 该 类 或 其 子 类 所 实现 。 

接口 的 属性 和 方法 不 能 限定 访问 控制 符 ， 但 是 通过 继承 类 可 以 限定 接口 中 属性 的 访问 权 
限 。 代 码 7-35 给 出 接口 的 继承 类 的 示例 。 


【代码 7-35】 接口 的 继承 类 示例 代码 : IExtendsClass.ts 


01 class Control { 


02 Private state: string; 

03 protected innerValue: string; 

04 public name: string; 

05 

06 interface IClickableControl extends Control { 
07 click(): void 

08 //state: string; // 错 误 

09 } 

10 class Button extends Control implements IClickableControl { 
EIT click() { 

42 this .name = "Button"; 

3 this.innerValue = "@001"; 

14 //this.state = "0"7 

5 } 

16 } 


a // 错 误 : Image 类 型 缺少 state 私有 属性 
18 class MyImage implements IClickableControl { 


9 CI 天 (由 
20 //this .name = "MyImage"; 
1 //this.innerValue = "@002"; 
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22 } 
23 


在 代码 7-35 中 ， 首 先 定义 了 一 个 类 Control， 其 中 有 一 个 private 的 私有 属性 state; 一 个 
protected 受 保护 属性 innerValue 和 一 个 public 公有 属性 name。06 行 声明 了 一 个 接口 
IClickableControl， 继 承 自 类 Control。10 行 中 定义 一 个 类 Button， 它 首先 继承 了 类 Control 且 
实现 了 接口 IClickableControl。 因 此 ，Button 类 中 的 click 方法 实现 可 以 访问 Control 类 中 的 公 
有 属性 和 受 保 护 属 性 ， 但 却 不 能 访问 私有 属性 state。18 行 由 于 MyImage 只 是 实现 了 接口 
IClickableControl， 但 不 是 Control 的 子 类 ， 则 会 报错 。 

IClickableControl 继承 了 Control 类 的 所 有 成 员 ， 包 括 私 有 成 员 state。 因 为 state 是 私有 属 
性 ， 只 有 Control 的 子 类 才能 够 拥有 一 个 声明 于 Control 的 私有 成 员 state， 这 对 私有 成 员 的 兼 
容 性 是 必需 的 ， 所 以 只 能 是 Control 的 子 类 才能 实现 IClickableControl 接口 。 


| 类 可 以 同时 继承 类 和 实现 接口 ， 但 是 要 注意 继承 必须 置 于 实现 接口 之 前 ， 即 extends 要 在 
implements 之 前 ， 否 则 报错 。 


7.3.5 ”类 也 可 以 实现 接口 


抽象 类 是 一 种 特殊 的 类 ， 可 以 被 其 他 类 继承 。 抽象 类 一 般 不 会 直接 被 实例 化 。 不 同 于 接 
口 ， 抽象 类 可 以 包含 成 员 的 实现 细节 。 abstract 关键 字 用 于 定义 抽象 类 和 在 抽象 类 内 部 定义 抽 
象 方法 。 因 此 可 以 用 抽象 类 来 实现 接口 的 功能 。 

抽象 类 中 的 抽象 方法 不 包含 具体 实现 并 且 必 须 在 子 类 中 实现 。 抽 象 方法 的 语法 与 接口 方法 
相似 。 两 者 都 是 定义 方法 签名 但 不 包含 方法 体 。 抽象 方 法 必须 包含 abstract 关键 字 并 且 可 以 包 
含 访问 修饰 符 。 代 码 7-36 给 出 抽象 类 实现 接口 功能 的 示例 。 


【代码 7-36】 抽象 类 实现 接口 功能 的 示例 代码 : AbstractClass.ts 


01 abstract class ShapeAbstract { 


02 protected abstract x: number; 

03 protected abstract y: number; 

04 public abstract tostring(): string; 
05 y 

06 abstract class NodeAbstract extends ShapeAbstract { 
07 // 私 有 的 不 能 定义 为 abstract 

08 //private abstract name: string; 

09 Public abstract x: number; 

10 public abstract width: number; 

站 Public abstract height: number; 
//protected 错误 ， 

3 Public tostring(): string { 

14 return JSON.stringify(this); 

15 ] 7 

16 } 


a class Circle extends NodeAbstract { 
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18 Public x: number = 0; 

19 protected y: number = 0; 

20 Public width: number = 20; 

省 public height: number = 20; 

22 public radius: number = 10; 

23 constructor (x:number,y:number,width:number, height:number, raduis:number){ 
24 super (); // 不 可 少 

pp this.x = x; 

26 this.y = y; 

全 光 this.width = width 

28 this.height = height; 

迷 3 this.radius = raduis; 

30 } 

31 public tostring(): string { 

32 return JSON.stringify(this); 
33 ]} 

34 } 


35 let circle = new Circle(0, 0, 30, 30, 15); 
36 console.log(circle.tostring()); 
Wx Oy 0 mid 30 "helight" S30 radiuen: LS. 

在 代码 7-36 中 ， 首 先 定义 了 一 个 抽象 类 ShapeAbstract，abstract 关键 字 必 须 置 于 class 之 
前 。 抽 象 类 ShapeAbstract 中 的 抽象 属性 和 方法 也 必须 用 abstract 来 声明 ,与 接口 不 同 的 是 , 抽 
象 类 中 的 属性 或 方法 可 以 用 访问 修饰 符 来 限定 。 

抽象 类 中 的 抽象 属性 和 方法 必须 在 非 抽 象 子 类 中 实现 ， 否 则 会 报错 。06 行 声明 了 一 个 抽 
象 类 NodeAbstract， 它 继承 自 抽象 类 ShapeAbstract。 由 于 NodeAbstract 也 是 抽象 类 ， 因 此 可 以 
不 实现 抽象 类 ShapeAbstract 的 属性 和 方法 ， 如 ShapeAbstract 类 中 的 属性 y。 这 里 有 一 点 需要 
注意 , 就 是 子 类 如 果实 现 父 类 同名 的 属性 或 方法 , 那么 子 类 属性 或 方法 的 可 访问 性 只 能 跟 父 类 
的 一 样 或 者 更 高 ,而 不 能 比 父 类 的 可 访问 性 低 。 例 如 ,ShapeAbstract 类 中 的 方法 tostring 是 public 

(公有 的 ) ， 那 么 子 类 NodeAbstract 只 能 用 public 来 限定 tostring 方法 ， 而 不 能 用 protected 。 


攻打 | 抽象 类 中 的 抽象 属性 和 方法 不 能 用 private 进行 限定 。 | 


除了 抽象 类 实现 接口 功能 外 ， 还 可 以 直接 对 类 进行 implements 来 实现 模拟 接口 功能 ， 如 
代码 7-37 给 出 对 类 进行 implements 的 示例 。 


【代码 7-37】 对 类 进行 implements 示例 代码 : ClassiImplements.ts 


01 class Disposable { 


02 isDisposed: boolean; 

03 dispose() { 

04 this.isDisposed = true; 
05 y 

06 B 

07 class Selectable { 

08 isActive: boolean; 

09 activate() { 
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10 this.isActive = true; 

41 } 

12 } 

3 class SmartObject implements Disposable, Selectable { 
14 // 实 现 Disposable 

415 isDisposed: boolean = false; 
16 dispose: () => void 

1 // 实 现 Selectable 

18 isActive: boolean = false; 
19 activate: () => void; 

20 } 


全 二 let obj = new SmartObject(); 

2 obj.activate(); 

在 代码 7-37 中 ， 首 先 应 该 注意 的 是 ，SmartObject 类 没有 使 用 extends 继承 ， 而 是 使 用 
implements 对 类 Disposable 和 Selectable 进行 实现 。 把 类 当成 了 接口 ， 仅 使 用 Disposable 和 
Selectable 的 类 型 而 非 其 实现 ,这 意味 着 需要 在 SmartObject 类 里 面 实现 Disposable 和 Selectable 
提供 的 接口 。 


了 .A 命名 空间 


命名 空间 (namespace) 是 用 来 组 织 和 重用 代码 的 。 如 果 你 学 过 C# 语 言 ， 应 该 对 命名 空间 
并 不 陌生 。Java 语言 中 一 般 叫 package， 即 包 名 。 命 名 空间 的 作用 就 是 防止 重 名 的 情况 。 

根据 官网 的 说 法 ，TypeScript 在 1.5 版 本 里 相关 概念 已 经 发 生 了 变化 。“ 内 部 模块 ”现在 
称 作 “命名 空间 ”。 而 “外 部 模块 ”现在 则 简称 为 “模块 ”， 这 是 为 了 与 ECMAScript 2015 
里 的 概念 保持 一 致 。 


7.4.1 定义 命名 空间 

命名 空间 的 目的 就 是 为 了 解决 命名 冲突 的 问题 。 现实 生活 中 , 有 时 候 一 个 学 校 里 面 也 会 出 
现 同 名 同姓 的 同学 。 如 果 同 名 的 同学 分 布 在 不 同 的 班级 里 面 ， 就 可 以 用 班级 名 + 姓名 来 区 分 。 
其 实 命名 空间 与 班级 名 的 作用 一 样 ， 可 以 防止 同名 的 函数 或 变量 相互 影响 。 

为 了 能 够 区 分 同名 同姓 的 两 个 同学 ,一般 都 会 用 一 个 前 绥 来 区 分 ， 如 大 张 三 和 小 张 三 。 或 
者 不 同班 级 的 同名 学 生 , 可 以 用 一 班 张 三 和 二 班 张 三 来 区 分 。 命 名 空间 定义 了 变量 或 函数 等 对 
象 的 可 见 范围 , 一 个 标识 符 可 在 多 个 命名 空间 中 定义 , 它 在 不 同 命名 空间 中 的 含义 是 互 不 影响 
的 。 

TypeScript 中 命名 空间 使 用 namespace 关键 字 来 定义 ， 基 本 语法 格式 如 下 : 


01 ”namespace 命名 空间 名 { 
02 // 内 部 类 和 成 员 
03 } 
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命名 空间 名 要 符合 一 般 标识 符 的 命名 规则 。 命 名 空间 可 以 用 .分 隔 的 几 个 单词 构成 ， 例 如 
com.wyd.modules。 这 种 分 层 的 命名 空间 可 以 尽 可 能 降低 命名 冲突 的 概率 。 代 码 7-38 给 出 定义 
命名 空间 的 示例 。 

【代码 7-38】 定义 命名 空间 示例 代码 : naamespacedemo.ts 


01 namespace com.wyd.demo { 


02 interface IPeople { 

03 id: string; 

04 name: string; 

05 learn(); 

06 } 

07 export class Man implements IPeople{ 

08 public id: string =""; 

09 public name: string = ""; 

10 constructor (id:string,name:string) { 
Ei this.id = id; 

12 this.name = name; 

FE } 

14 learn() { 

5 console.log(this.name + " learning"); 
16 } 

7 } 

18 } 


19 let man = new com.wyd.demo.Man ("001", "jack"); 

20 man.learn(); 

在 代码 7-38 中 , 01~18 行将 接口 IPeople 和 Man 类 声明 在 命名 空间 com.wyd.demo 中 , 如 
果 需 要 在 命名 空间 外 部 调用 Man 类 或 IPeople 接口 ， 则 需要 在 Man 类 或 IPeople 接口 前 添加 
export 关键 字 。 

同 Java 中 的 包 名 和 C# 的 命名 空间 一 样 , TypeScript 中 的 命名 空间 也 可 以 将 代码 包 庄 起 来 ， 
只 对 外 暴露 需要 被 外 部 访问 的 对 象 。 命 名 空间 内 的 对 象 通过 export 关键 字 对 外 暴露 。 要 在 一 
个 命名 空间 中 去 调用 另 一 个 命名 空间 中 的 类 时 ， 则 需要 用 “命名 空间 .类 ”的 方式 来 访问 ， 也 
就 是 要 用 类 的 全 路 径 。 如 19 行 要 在 命名 空间 com.wyd.demo 外 访问 其 内 部 的 Man 类 ， 则 需要 
用 全 路 径 com.wyd.demo.Man 进行 访问 。 

在 构建 比较 复杂 的 应 用 时 ， 往 往 需要 将 代码 分 离 到 不 同 的 文件 中 ， 以 便 进 行 维护 。 同 一 个 
命名 空间 可 以 在 不 同 的 文件 中 出 现 。 尽 管 是 不 同 的 文件 ,但 是 它们 仍然 是 同一 个 命名 空间 , 并 
且 在 使 用 的 时 候 就 如 同 它 们 在 一 个 文件 中 定义 的 一 样 。 

换 句 话说 , 就 是 物理 上 是 分 离 的 , 但 是 逻辑 上 是 一 个 整体 。 由 于 不 同文 件 之 间 存 在 依赖 关 
系 ， 因 此 需要 加 入 引用 标签 来 告诉 编译 器 文件 之 间 的 关联 。 引 用 标签 用 /// <reference 
path="xxx.ts" /> 来 表示 。 代 码 7-39 给 出 定义 命名 空间 引入 标签 示例 。 


【代码 7-39】 命名 空间 引入 标签 示例 代码 : namespacedemo2.ts 


01 /// <reference path="namespacedemo.ts" /> 
02 namespace com.wyd.demo { 
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03 export function callNS(){ 

04 let man = new Man("001", "jack"); 
05 man.learn(); 

06 上 

07 


08 com.wyd.demo .callNS () 7 
在 代码 7-39 中 ， 注 意 第 一 行 ， /// <reference path="namespacedemo.ts" /> 表示 此 文件 依赖 
于 namespacedemo.ts 文件 。 由 于 此 命名 空间 和 namespacedemo.ts 中 定义 的 命名 空间 一 致 ， 因 
此 04 行 访问 Man 类 的 时 候 不 需要 通过 命名 空间 进行 访问 。 
当 涉 及 多 文件 命名 空间 的 时 候 , 必须 确保 所 有 编译 后 的 代码 都 能 被 按 顺 序 正确 加 载 。 我们 
可 以 用 tsc 命名 来 将 分 散 的 多 文件 编译 到 一 个 文件 中 去 。 命 令 如 下 : 
tsc --outFile all.js .\namespacedemo2.ts 
调用 此 命令 后 , 将 根 目录 下 的 namespacedemo2.ts 编译 到 alljs 文件 中 。 当 编译 器 解析 出 /// 
<reference path="namespacedemo.ts" /> 语句 时 ， 就 会 自动 将 namespacedemo.ts 进行 编译 ， 然 后 
编译 namespacedemo2.ts 文件 中 的 内 容 。alljs 文件 结果 如 图 7.4 所 示 。 


;5 alljs x 
1 var com; 
2 (function (com) { 
3 Var d; 
4 (function (wyd) { 
5 var demo; 
6 (function (demo) { 
7 var Man = /** Bclass */ (function () { 
8 function Man(id, name) { 
this.id = ""; 
10 this.name = ™"; 
11 this.id = id; 
12 this.name = name; 
13 } 
14 Man.prototype. learn = function () { 
15 console. log(this.name + " learning"); 
16 
17 return Man; 
18 10); 
19 demo.Man = Man; 
29 Dldeno = wyd.demo || (wyd.deno = {))); 
21 D) (wyd = com.wyd || (com.wyd = {7)); 


22 YD)(com || (com = £0)); 

23 var man = new com.wyd.demo.Man("991", "jack"); 
24 man.learn(); 

25  /// reference paths"namespacedemo.ts" /> 

26 var com; 

27 (function (com) { 


28 Var wyd; 
29 (function (wyd) { 

39 var denmo; 

31 (function (demo) { 

32 function callhs() © 


33 var man = new demo.Man("881", "jack"); 


图 7.4 alljs 部 分 截图 界面 
7.4.2” 诬 套 命名 空间 
命名 空间 支持 嵌 套 ， 即 我 们 可 以 将 命名 空间 定义 在 另外 一 个 命名 空间 里 头 。 代 码 7-40 给 
出 命名 空间 嵌 套 的 示例 。 
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【代码 7-40】 命名 空间 嵌 套 示例 代码 : namespacedemo3.ts 


01 namespace com.wyd { 


02 // 左 套 时 ，export 不 可 少 

03 export namespace nested { 

04 export function callNS() { 

05 //com.wyd.demo.Man 

06 let man = new demo.Man("001", "jack"); 
07 man.learn(); 

08 } 

09 } 

10 } 


11 ”// 命 名 空间 别名 

12 import myNS = com.wyd.nested; 
13: com.wyd.nested.callNS (); 

14 myNS .call1NS (); 


在 代码 7-40 中 ， 将 命名 空间 nested 顽 套 在 命名 空间 com.wyd 里 。 这 里 需要 注意 的 是 ，06 
行 用 demo.Man 对 com.wyd.demo.Man 进行 访问 , 之 所 以 可 以 不 用 全 路 径 是 由 于 com.wyd 是 一 
致 的 ， 这 样 就 可 以 省 略 。 


吉 在 嵌 套 命名 空间 中 ， 里 层 的 namespace 必须 用 export， 否 则 无 法 访问 。 | 


命名 空间 一 般 都 比较 长 , 书写 起 来 比较 麻烦 , 我 们 其 实 可 以 给 命名 空间 起 一 个 别名 , 用 这 
个 别名 就 可 以 代 蔡 命名 空间 。 如 12 行 的 “import myNS = com.wyd.nested;” 就 给 命名 空间 
com.wyd.nested 起 了 一 个 别名 myNS ， 这 样 就 可 以 通过 myNS.callNS 来 调用 
com.wyd.nested.callNS 方法 。 

命名 空间 别名 使 用 的 语法 是 “import ns = x.y.z”， 但 是 要 注意 与 加 载 模块 的 “import m = 
require('module')” 语 法 的 区 别 。 


1 与， 外 部 模块 


前 面 已 经 说 到 ，TypeScript 在 1.5 版 本 后 将 “外 部 模块 ”简称 为 “模块 ”。 从 ECMAScript 
2015 开始 ，JavaScript 引入 了 模块 的 概念 。TypeScript 也 沿用 这 个 概念 。 

模块 在 其 自身 的 作用 域 里 执行 , 而 不 是 在 全 局 作用 域 里 。 这 意味 着 定义 在 一 个 模块 里 的 变 
量 、 函 数 、 类 和 接口 等 在 模块 外 部 是 不 可 见 的 ， 除 非 你 明确 地 使 用 export 进行 导出 。 如 果 想 
使 用 其 他 模块 导出 的 变量 、 函 数 、 类 和 接口 等 对 象 ， 就 必须 手动 使 用 import 进行 导入 。 

模块 是 自 声明 的 ， 两 个 模块 之 间 的 关系 可 以 通过 在 TypeScript 文件 代码 顶部 使 用 imports 
和 exports 确定 。 
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TypeScript 与 ECMAScript 2015 一 样 , 任何 包含 顶级 import 或 者 export 的 文件 都 被 当成 一 
个 模块 。 相 反 ， 如 果 一 个 文件 不 带 有 顶级 的 import 或 者 export 声明 ， 那 么 它 的 内 容 被 视 为 全 
局 可 见 的 。 

前 端 模块 化 开发 适应 当前 前 端 开发 日 渐 复 杂 的 大 背景 ， 模 块 化 开发 可 以 复 用 别人 的 代码 ， 
同时 按 需 加 载 的 功能 可 以 提高 网 络 加 载 的 速度 。 


7.5.1 模块 加 载 器 


模块 使 用 模块 加 载 器 去 导入 其 他 的 模块 。 在 运行 时 , 模块 加 载 器 的 作用 是 在 执行 此 模块 代 
码 前 去 查找 并 执行 这 个 模块 的 所 有 依赖 ,读者 最 熟知 的 JavaScript 模块 加 载 器 是 服务 于 Nodejs 
的 CommonJS 和 服务 于 Web 应 用 的 Require.js。 

TypeScript 中 的 模块 机 制 与 ES6 的 模块 机 制 基本 类 似 ， 也 提供 了 转换 为 amd、es6、umd、 
commonjs 和 system 的 功能 。 

模块 加 载 器 一 方面 实现 js 文件 的 异步 加 载 ， 避 免 网 页 失去 响应 ， 另 一 方面 负责 管理 模块 
之 间 的 依赖 关系 ， 便 于 代码 的 编写 和 维护 。 常 用 模块 加 载 器 分 类 如 图 7.5 所 示 。 


图 7.5 常用 模块 加 载 器 分 类 示意 图 


模块 加 载 器 一 般 分 为 可 以 供 浏览 器 端 使 用 的 AMD 规范 和 CMD 规范 、 供 服务 器 端 使 用 的 
CommonJS 规范 以 及 跨 浏 览 器 端 和 服务 器 端的 UMD 规范 。 


1. AMD 规范 


AMD (Asynchronous Module Definition， 异 步 模 块 加 载 机制 ) 规范 的 描述 比较 简单 ， 完 整 
描述 了 模块 的 定义 、 依 赖 关 系 、 引 用 关系 以 及 异步 加 载 机 制 。requireJS 库 采 用 AMD 规范 进行 


248 


第 7 章 面向 对 象 编程 


模块 加 载 。AMD 规范 特别 适用 于 浏览 器 环境 。 

下 面 用 一 个 简单 的 例子 来 说 明 AMD 规范 是 如 何 加 载 模块 的 。AMD 规范 用 一 个 全 局 函数 
define 来 定义 模块 。 

第 一 步 ， 新 建 一 个 moduleAjjs 文件 ， 按 照 约定 ， 其 模块 名 为 文件 名 moduleA。 函 数 define 
中 用 一 个 匿名 函数 返回 了 一 个 对 象 。 代 码 7-41 给 出 moduleAjs 的 代码 示例 。 


【代码 7-41】 AMD 规范 中 moduleAjs 示例 代码 : moduleA.js 


01 define( 


02 function() { 

03 return { 

04 name: ‘'Jack', 
05 age: 31 

06 } 

07 } 

08 en 


第 二 步 , 新 建 一 个 moduleB.js 文件 , 按照 约定 , 其 模块 名 为 文件 名 moduleB。 模块 moduleB 
依赖 模块 moduleA。 当 define 函数 有 两 个 参数 时 ， 第 一 个 参数 需要 用 一 个 数组 来 描述 依赖 项 ; 
第 二 个 参数 是 一 个 匿名 的 工厂 函数 , 返回 一 个 对 象 , 其 中 匿名 函数 的 参数 列表 和 依赖 项 是 一 一 
对 应 的 关系 。 代 码 7-42 给 出 moduleB.js 的 代码 示例 。 

【代码 7-42】 AMD 规范 中 moduleB.js 示例 代码 : moduleB.js 


01 define(['moduleA'], function(moduleA) { 


02 return { 

03 showName: function() { 

04 console.log (moduleA.name); 
05 Ia 

06 getAge: function() { 

07 return moduleA.age; 

08 上 

09 让 

10 Ds; 


第 三 步 , 新建 一 个 入 口 文件 man.js。 在 这 个 文件 中 , 首先 用 require.config 方法 来 加 载 jquery 
库 ， 然 后 用 require 函数 来 调用 moduleB 和 jquery 库 中 的 方法 。require 函数 有 两 个 参数 时 ， 第 
一 个 参数 是 一 个 数组 ,可 以 用 来 描述 需要 引入 的 依赖 项 ， 也 就 是 要 加 载 的 模块 ; 第 二 个 是 一 个 
匿名 的 工 三 函数， 其 中 匿名 函数 的 参数 列表 和 引入 的 依赖 项 是 一 一 对 应 的 关系 。 代 码 7-43 给 
出 man.js 的 代码 示例 。 


【代码 7-43】 AMD 规范 中 man.js 示例 代码 : man.js 


01 require.config({ 
02 paths: { 
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03 jquery: "http://code.jquery.com/jquery-1.11.1.min" 
04 } 

05 ph 

06 require(["jquery", "moduleB"], function($, moduleB) { 

07 moduleB.showName (); 

08 $("#mydiv") .html ("age=" + moduleB.getAge()); 

09 a 


在 代码 7-43 中 ， 用 require.config 配置 了 对 jquery 库 的 路 径 信 息 ，require 配置 依赖 模块 的 
时 候 , 只 是 声明 了 模块 的 名 称 , 却 不 知道 模块 的 具体 位 置 。 在 没有 特殊 声明 的 情况 下 , requireJS 
认为 模块 名 和 文件 名 相同 ， 因 此 ， 只 要 两 者 一 致 ，requireJS 就 可 以 正确 找到 脚本 文件 。 如 果 
不 同 , 就 需要 通过 require.config 中 的 path 进行 配置 ， 模 块 依赖 是 指 模块 之 间 的 相互 依赖 关系 ， 
脚本 运行 时 ， 只 有 当 依 赖 的 模块 全 部 加 载 完成 之 后 ， 当 前 脚本 才 会 执行 ， 这 就 是 依赖 关系 的 作 
用 。 

第 四 步 , 新 建 一 个 index.html 文件 ,用 来 将 main.js 文件 引入 到 HTML 页 面 中 运行 。requirejs 
可 以 在 引入 自身 JS 文件 时 根据 script 脚本 中 的 data-main 属性 的 配置 来 加 载 入 口 文件 。 代 码 
7-44 给 出 man.js 的 代码 示例 。 


【代码 7-44】 AMD 规范 中 index.html 示例 代码 : index.html 


01 <!DOCTYPE html> 
02 <html lang="en"> 


03 <head> 

04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>AMD</title> 

08 </head> 

09 <body> 

10 <div id="mydiv">body</div> 

3 <script type="text/javascript" src="require.js" data-main="main.js"> 
</script> 


he </body> 
13 </html> 


运行 此 index.html, 则 结果 如 图 7.6 所 示 。 如 果 index.html 运行 页 面 中 出 现 age=31 的 信息 ， 
那么 在 代码 7-43 中 08 行 的 语句 正确 运行 。 
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口 x 


D AMD x Ww 
CGC 文件 | CySrqc077/amd/ 图 妆 四 


age=31 


7.6 AMD 模块 index.html 示例 运行 结果 图 


2. CMD 规范 


CMD (Common Module Definition， 通 用 模块 定义 ) 规范 是 国内 发 展 出 来 的 。 在 AMD 规 
范 中 有 一 个 浏览 器 的 实现 库 requireJS，CMD 规范 也 有 一 个 浏览 器 的 实现 库 SeaJS。SeaJS 功能 
和 requireJS 基本 相同 ， 只 不 过 在 模块 定义 方式 和 模块 加 载 时 机 上 有 所 不 同 。 

在 CMD 规范 中 ， 一 个 模块 就 是 一 个 js 文件 。 代 码 的 书写 格式 如 下 : 


define(id?,d?,factory) 


因为 CMD 推崇 一 个 文件 就 是 一 个 模块 ， 所 以 经 常用 文件 名 作为 模块 id。CMD 推崇 依赖 
就 近 ， 所 以 一 般 不 在 define 函数 的 参数 中 写 依 赖 。define 函数 的 第 三 个 参数 factory 是 一 个 工 
厂 函 数 ， 格 式 为 function(require,exports,module)。 其 中 有 三 个 参数 : require 是 一 个 方法 ， 用 来 
获取 其 他 模块 提供 的 接口 ; exports 是 一 个 对 象 , 用 来 向 外 提供 模块 接口 ; module 是 一 个 对 象 ， 
上 面 存储 了 与 当前 模块 相关 联 的 一 些 属性 和 方法 。 

第 一 步 ， 新 建 一 个 moduleA.js 文件 ， 按 照 约定 ， 其 模块 名 为 文件 名 moduleA。 函 数 define 
中 用 一 个 匿名 函数 返回 一 个 对 象 。 代 码 7-45 给 出 moduleAjjs 的 代码 示例 。 


【代码 7-45】 CMD 规范 中 moduleAJjs 示例 代码 : moduleAjs 


01 define(function(require, exports, module) { 


02 module .exports = { 
03 name: ‘'Jack', 
04 age: 31 

05 3 

06 oe 


第 二 步 , 新 建 一 个 moduleB.js 文件 ,按照 约定 , 其 模块 名 为 文件 名 moduleB 。 模 块 moduleB 
依赖 模块 moduleA。define 函数 前 两 个 参数 是 可 选 参数 ， 可 以 省 略 。 一 般 都 直接 用 第 三 个 参数 
factory 来 构建 模块 信息 ，factory 工厂 函数 中 可 以 通过 require 函数 加 载 模块 moduleA， 并 通过 
module.exports 对 外 导出 模块 。 代 码 7-46 给 出 moduleB.js 的 代码 示例 。 


【代码 7-46】 CMD 规范 中 moduleB.js 示例 代码 : moduleB.js 


01 define(function(require, exports, module) { 
02 Var moduleA = require("moduleA"); 
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03 module .exports = { 

04 showName: function() { 

05 console.log (moduleA.name); 
06 }, 

07 getAge: function() { 

08 return moduleA.age; 

09 } 

10 |; 

1 | 


exports 仅仅 是 module.exports 的 一 个 引用 。 在 factory 工厂 函数 内 部 exports 重新 赋值 时 
[ 并 不 会 改变 module.exports 的 值 。 因 此 给 exports 赋值 是 无 效 的 ,不 能 用 来 更 改 模块 接口 。 


第 三 步 ， 新 建 一 个 入 口 文 件 man.js。 这 个 文件 中 仍然 用 define 函数 来 定义 一 个 模块 main。 
模块 main 中 用 require('moduleB') 语 句 引 入 模块 moduleB， 并 赋值 给 内 部 变量 moduleB， 这 样 
就 可 以 利用 moduleB 来 访问 模块 moduleB 中 的 showName 方法 。 代 码 7-47 给 出 man.js 的 代码 
示例 。 


【代码 7-47】 CMD 规范 中 manJjs 示例 代码 : manJjs 


01 define(function(require, exports, module) { 


02 var moduleB = require('moduleB'); 

03 console.1log (moduleB) 

04 moduleB.showName (); 

05 $("#mydiv") .html ("age=" + moduleB.getAge()); 
06 D); 


第 四 步 ， 新 建 一 个 index.html 文件 来 加 载 mainjs 文件 ， 由 于 浏览 器 中 并 不 能 直接 运行 
CMD 模块 代码 ， 这 里 用 sea.js 库 来 加 载 CMD 模块 main.js。 代 码 7-48 给 出 index.html 的 代码 
示例 。 


【代码 7-48】 CMD 规范 中 index.html 示例 代码 : index.html 


01 <!DOCTYPE html> 
02 <html lang="en"> 
03 <head> 


04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale= 
20"> 

06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>CMD</title> 

08 </head> 

09 <body> 

10 <div id="mydiv">body</div> 
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bs <script type="text/javascript" src="http://code.jquery.com/jquery- 
TT nn /> 

be <script type="text/javascript" src="sea.js"></script> 

3 <script> 

14 seajs.use(['main.js'], function(main) { 

15 ]) 7 

16 </script> 


17 ”</body> 

18 </html> 

在 代码 7-48 中 , 由 于 模块 main.js 依赖 jquery 库 ， 因 此 首先 需要 在 HTML 中 引入 jqueryjs 
文件 ， 然 后 要 引入 seajs 库 ， 这 样 才 能 调用 seajs.use 来 加 载 模块 信息 。 运 行 此 index.html， 则 
结果 如 图 7.7 所 示 。 如 果 index.html 运行 页 面 中 出 现 age=31 的 信息 , 那么 在 代码 7-47 中 05 行 
的 语句 则 正确 运行 。 


D cMD x + a 


CGC @ 文 件 | CVSrc/C077/cmd/ 儿女 四 : 


age=31 


图 7.7 CMD 模块 index.html 示例 运行 结果 图 


3. CommonJS 规范 


CommonJS 规范 规定 ， 每 一 个 文件 就 是 一 个 模块 ， 拥 有 自己 独立 的 作用 域 ， 每 个 模块 内 部 的 
module 变量 代表 当前 模块 。module 变量 是 一 个 对 象 ， 它 的 exports 属性 (module.exports) 是 对 外 
的 接口 。 当 需要 用 require 方法 加 载 某 个 模块 时 ， 本 质 上 是 加 载 该 模块 的 module.exports 属性 。 

CommonJS API 定义 很 多 普通 应 用 程序 〈 主 要 是 指 非 浏览 器 的 应 用 ) 使 用 的 API。 这 样 的 
话 ， 开 发 者 可 以 使 用 CommonJS API 编写 各 种 类 型 的 应 用 程序 ， 且 这 些 应 用 可 以 运行 在 不 同 
的 JavaScript 解释 器 和 不 同 的 主机 环境 中 。CommonJS 的 核心 思想 就 是 通过 require 方法 来 同步 
加 载 依赖 的 模块 ， 通 过 exports 或 者 module.exports 来 导出 需要 暴露 的 接口 。 

NodeJS 是 CommonJS 规范 的 实现 ,而 webpack 打包 工具 也 是 原生 支持 CommonJS 规范 的 。 
在 兼容 CommonJS 的 系统 中 , 我们 不 但 可 以 开发 服务 器 端 JavaScript 应 用 程序 , 而 且 可 以 开发 
图 形 界 面 应 用 程序 等 。 

由 于 CommonJS 是 同步 加 载 模块 的 ， 对 于 浏览 器 而 言 ， 需 要 将 文件 从 服务 器 端 同步 请 求 
过 来 加 载 就 不 太 适 用 了 ， 同 步 等 待 会 出 现 浏 览 器 “假死 ”的 情况 ， 因 此 CommonJS 是 不 适用 
于 浏览 器 端的 。 


二 虽然 CommonJS 编写 的 模块 不 适用 于 浏览 器 端 ， 但 是 可 以 借助 工具 进行 格式 转换 ， 从 而 
| 适用 浏览 器 端 。 
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浏览 器 不 兼容 CommonJS 的 根本 原因 在 于 缺少 四 个 Node.js 环境 的 变量 : module, exports， 
require 和 global。 换 句 话说 ， 只 要 在 浏览 器 环境 当中 提供 这 四 个 变量 ， 那 么 浏览 器 就 能 加 载 
CommonJS 模块 。Browserify 是 目前 常用 的 CommonJS 格式 转换 工具 。 

在 模块 加 载 中 , 会 涉及 文件 路 径 的 问题 , 首先 必须 掌握 几 种 常见 的 文件 路 径 写法 : 以 / 开 
头 ， 表 示 从 根 目录 开 始 解析 ;以 / 开头 ， 表 示 从 当前 目录 开始 解析 ; 以 ../ 开头 ， 表 示 从 上 
级 目录 开始 解析 。 

第 一 步 ， 新 建 一 个 moduleA.js 文件 ， 在 moduleAjjs 文件 中 定义 一 个 obj 对 象 ， 并 通过 
module.exports = obj 导出 模块 信息 。 代 码 7-49 给 出 moduleA.js 的 代码 示例 。 

【代码 7-49】 CommonJS 规范 中 moduleAJjs 示例 代码 : moduleA.js 


01 var obj ={ 


02 name: ‘'Jack', 
03 age: 31 
04 } 


05 module.exports = obj; 


第 二 步 , 新建 一 个 moduleBjjs 文件 ,首先 用 require("./moduleAjs") 来 表示 当前 模块 依赖 于 
模块 文件 moduleA.js， 然 后 声明 一 个 func 的 对 象 ， 里 面包 含 showName 和 getAge 方法 ， 这 两 
个 方法 都 可 以 使 用 导入 的 moduleAjjs 文件 中 导出 的 对 象 obj。 最 后 ， 用 module.exports =func 
导出 模块 信息 。 代 码 7-50 给 出 moduleB.js 的 代码 示例 。 


【代码 7-50】 CommonJS 规范 中 moduleB.js 示例 代码 : moduleB.js 


01 var moduleA = require("./moduleA.js"); 
02 Var func = { 


03 showName: function () { 

04 console.log (moduleA.name); 
05 }， 

06 getAge: function () { 

07 return moduleA.age; 

08 } 

09 }; 


10 module.exports =func; 


第 三 步 ， 新 建 一 个 入 口 文件 man.js。 这 个 文件 中 首先 用 require('./moduleB.jjs") 方 法 来 加 载 
moduleB.js 库 并 将 模块 导出 信息 赋值 给 变量 moduleB 。 然 后 可 以 通过 变量 moduleB 来 调用 
moduleB.js 中 的 方法 。 代 码 7-51 给 出 manjs 的 代码 示例 。 

【代码 7-51】 CommonJS 规范 中 man.js 示例 代码 : manjs 


01 var moduleB = require('./moduleB.js'); 


02 //console.1og (moduleB) 
03 moduleB. showName (); 
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第 四 步 ， 在 Visual Studio Code 中 配置 启动 项 launch.json。CommonJS 规范 可 以 在 NodeJS 
中 运行 ， 这 里 配置 一 个 类 型 为 node、 启 动 文件 为 commonijs 文件 夹 下 的 main.js。 代 码 7-52 给 
出 launch.json 的 代码 示例 。 


【代码 7-52】 CommonJS 规范 中 launch.json 示例 代码 : launch.json 


01 { 

02 bse» hol We A jE 

03 "configurations": [ 

04 证 

05 "type": "node", 

06 "request": "launch", 

07 "name": "debug commonjs", 
08 "program": "${workspaceFolder}/commonjs\\main.js" 
09 上 

10 ] 

} 


在 Visual Studio Code 中 直接 调试 运行 ， 可 以 输出 如 图 7.8 所 示 的 结果 。 如 果 在 调试 控制 
台中 打印 出 Jack 文本 信息 就 表示 代码 7-52 运行 正确 。 


mainjs % 


var moduleB = require(',/moduleB.js'); 
//console.log(moduleB) 
moduleB. showName( ); 


DEBUG CONSOLE TERMINAL debug commonjs 


Debugger listening on ws://127.0.8.1:8178 d2f7-49ed-81f4-8dca2d666688 
For help, see: https://nodejs.org/en/docs 
Jack moduleB. js:4 


图 7.8 ”CommonJS 模块 示例 运行 结果 图 


4. UMD 规范 


UMD (Universal Module Definition ， 通 用 模块 规范 ) 是 由 社区 想 出 来 的 一 种 整合 了 
CommonJS 和 AMD 两 个 模块 定义 规范 的 方法 。UMD 用 一 个 工厂 函数 来 统一 不 同 的 模块 定义 
规范 。 

UMD 有 两 个 基本 原则 : 所 有 定义 模块 的 方法 需要 单独 传 入 依赖 ， 所 有 定义 模块 的 方法 都 
需要 返回 一 个 对 象 ， 供 其 他 模块 使 用 。UMD 实现 思路 比较 简单 ， 先 判断 当前 环境 是 否 支持 
commonjs 模块 机 制 (判断 module 和 module.exports 是 否 为 object 类 型 ) ， 如 果 存 在 就 使 用 
commonjs 规范 进行 模块 加 载 ; 如 果 不 存在 就 判断 是 否 支持 AMD (判断 define 和 define.cmd 
是 否 存在 ) ， 若 存在 则 使 用 AMD 规范 加 载 模块 ， 若 前 两 个 都 不 存在 ， 则 将 模块 暴露 到 全 局 变 
量 window 或 global 中 。 

第 一 步 , 新 建 一 个 moduleAjjs 文 件 。 按 照 UMD 规范 ,首先 判断 当前 环境 是 否 支持 commonjs 
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模块 机 制 ， 如 果 不 支持 就 判断 一 下 是 否 支持 amd 模块 机 制 。moduleAjs 中 定义 的 是 一 个 立即 
执行 函数 传 入 模块 定义 的 工厂 函数 factory。 在 工厂 函数 factory 中 通过 exports.obj = obj 对 外 暴 
露 接口 。 代 码 7-53 给 出 moduleAjjs 的 代码 示例 。 


【代码 7-53】 UMD 规范 中 moduleAJjs 示例 代码 : moduleAjs 


01 (function (factory) { 


02 if(typeof module==="object"&& typeof module.exports === "object") { 
Qa Var V = factory(require, exports); 

04 if (v !== undefined) module.exports = V7 

05 } 

06 else if (typeof define === "function" && define.amd) { 
07 define (["require"， "exports"], factory); 

08 } 

09 }) (function (require, exports) { 

10 ”use strict"y 

11 exports. esModule = true; 

12 var obj = { 

13 name: ‘'Jack', 

14 age: 31 

5 3 

16 exports.obj = obj; 

过 in 


第 二 步 , 新建 一 个 moduleB.js 文 件 。 按 照 UMD 规范 ,首先 判断 当前 环境 是 否 支持 commonjs 
模块 机 制 ， 如 果 不 支持 就 判断 一 下 是 否 支持 amd 模块 机 制 。moduleB.js 中 定义 的 是 一 个 立即 
执行 函数 传 入 模块 定义 的 工厂 函数 factory。 在 工厂 函数 factory 中 通过 exports.func = func 对 外 
暴露 接口 。 代 码 7-54 给 出 moduleB.js 的 代码 示例 。 

【代码 7-54】 UMD 规范 中 moduleB.js 示例 代码 : moduleB.js 


01 (function (factory) { 


02 if(typeof module==="object"&& typeof module.exports === "object") { 
03 var V = factory (require, exports); 

04 if (v !== undefined) module.exports = Vv; 

05 . 

06 else if (typeof define === "function" && define.amd) { 
07 define(["require", "exports", "./moduleA"], factory); 
08 1 

09 }) (function (require, exports) { 

10 "use strict"; 

sl exports. esModule = true; 

2 var moduleA 1 = require("./moduleA"); 

sl Var func = { 

14 showName: function () { 
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下 可 console.log (moduleA 1.0bj.name); 
16 }, 

17 getAge: function () { 

18 return moduleA 1.0bj.age; 

19 } 

20 yn 

21 exports.func = func; 

22 py 


第 三 步 ， 新 建 一 个 入 口 文 件 man.js， 该 文件 用 define(["require", "exports", "./moduleB"], 
factory) 和 require("./moduleB") 定 义 了 在 两 种 模块 机 制 下 该 模块 对 moduleB 的 依赖 关系 。 代 码 
7-55 给 出 man.js 的 代码 示例 。 

【代码 7-55】 UMD 规范 中 man.js 示例 代码 : man.js 


01 (function (factory) { 


02 if (typeof module === "object" &g& typeof module.exports 一 = "object") { 
03 var V = factory (require, exports); 

04 if (v !== undefined) module.exports = v; 

05 } 

06 else if (typeof define === "function" && define.amd) { 
07 define(["require", "exports", "./moduleB"], factory); 
08 

09 }) (function (require, exports) { 

10 "use strict"; 

le! exports. esModule = true; 

be console.log (require); 

3 var moduleB 1 = require("./moduleB"); 

Ee console.log (moduleB 1.func); 

15 moduleB 1.func.showName(); 

16 $("#mydiv") .html ("age=" + moduleB 1.func.getAge()); 

E Px 


第 四 步 ， 新 建 一 个 index.html 页 面 ， 用 AMD 方式 来 加 载 main.js 文件 。 代 码 7-56 给 出 
index.html 的 代码 示例 。 


【代码 7-56】 UMD 规范 中 index.html 示例 代码 : index.html 


01 <!DOCTYPE html> 
02 <html lang="en"> 
03 <head> 


04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>UMD</title> 


08 </head> 
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09 
10 


14 


<body> 
<div id="mydiv">body</div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="require.js" data-main="main.js"> 
</script> 
</body> 
</html> 


运行 index.html， 可 以 输出 如 图 7.9 所 示 的 结果 。 如 果 index.html 运行 页 面 中 出 现 age=31 
的 信息 ， 那 么 在 代码 7-55 中 16 行 的 语句 则 正确 运行 。 


之 x 
D UMD x + 


C @ 文 件 | CSrdC077/umd/.. 图 人 四 


age=31 


图 7.9 UMD 模块 示例 运行 结果 图 


5. SystemJS 规范 


SystemJS 是 一 个 通用 的 模块 加 载 器 ， 能 在 浏览 器 或 者 NodeJS 上 动态 加 载 模块 ， 并且 支持 
CommonJS、AMD、 全 局 模块 对 象 和 ES6 模块 。 通 过 使 用 插件 ， 它 不 仅 可 以 加 载 JavaScript， 
还 可 以 加 载 TypeScript。SystemJS 建立 在 ES6 模块 加 载 器 之 上 ， 所 以 它 的 语法 和 API 在 将 来 
很 可 能 是 语言 的 一 部 分 ， 让 我 们 的 代码 更 不 会 过 时 。 

SystemJS 规范 用 System.register 函数 来 创建 模块 ,第 一 个 参数 为 数组 ,可 以 用 来 表示 依赖 
项 ， 第 二 个 参数 是 一 个 工厂 函数 ， 可 以 用 来 定义 模块 信息 。 

第 一 步 ， 新 建 一 个 moduleAjs 文件 。 代 码 7-57 给 出 moduleAjjs 的 代码 示例 。 该 模块 无 依 
赖 ， 因 此 第 一 个 参数 为 ]， 在 第 二 个 工厂 函数 中 返回 一 个 对 象 ， 其 中 在 对 象 的 execute 方法 中 


创建 了 一 个 对 象 obj， 并 用 exports_1("obj", obj) 返 回 。 


【代码 7-57】 SystemJS 规范 中 moduleAjs 示例 代码 : moduleAJjs 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
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System.register([], function (exports 1, context 1) { 
"use strict"; 
var obj; 
Var moduleName = context 1 && context 1.id; 
return { 
setters: []， 
execute: function () { 
obj = 1{ 
name: "Jack'， 
age: 31 


Es 
2 
I 
14 
15 


Ds; 


}; 
exports_ 1("obj", obj); 


}; 
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第 二 步 ， 新 建 一 个 moduleB.js 文件 ， 用 函数 “System.register(["./moduleA.js"],，function 
(exports_1, context_1)” 创 建 一 个 对 moduleA.js 依赖 的 模块 。 代 码 7-58 给 出 moduleB.js 的 代码 


示例 。 


【代码 7-58】 SystemJS 规范 中 moduleB.js 示例 代码 : moduleB.js 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
EL 
2 
El 
14 
15 
16 
1 
18 
19 
20 
2 
22 
23 


System.register(["./moduleA.js"], function (exports 1, context 1) { 


1D); 


"use strict"; 
var moduleaA 1, func; 
Var _moduleName = context 1 && context 1.id; 
return { 

setters: [ 


function (moduleA 1 1) { 


moduleA 1 = moduleA 1 1; 
} 
], 
execute: function () { 
func = { 
showName: function () { 


console.log (moduleaA 1.obj.name) 
}， 
getAge: function () { 


return moduleA 1.0obj.age; 


}; 
exports_l("func", func); 


Ey 


第 三 步 ， 新 建 一 个 入 口 文件 man.js， 用 函数 “System.register(["./moduleB js"]，function 
(exports_1, context_1)” 创 建 一 个 对 moduleB.js 依赖 的 模块 。 代 码 7-59 给 出 moduleB,js 的 代码 


示例 。 


【代码 7-59】 SystemJS 规范 中 man.js 示例 代码 : man.js 


01 
02 
03 


System.register(["./moduleB.js"], function (exports 1, context 1) { 


"use strict"; 


var moduleB 1; 
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04 Var _moduleName = context 1 && context 1.id; 
05 return { 

06 setters: [ 

07 function (moduleB 1 1) { 

08 moduleB 1 = moduleB 1 1; 

09 

10 ]， 

Ei execute: function () { 

2 console.log (moduleB 1.func); 

13 moduleB 1.func.showName(); 

14 $("#mydiv") .html ("age=" + moduleB 1.func.getAge()); 
15 下 

16 和 

Ee 


第 四 步 ,新 建 一 个 index.html, 用 来 加 载 main.js 文件 。 由 于 浏览 器 并 不 能 直接 运行 SystemJS 
规范 的 模块 文件 ， 因 此 引入 system.js 库 文件 。 代 码 7-60 给 出 index.html 的 代码 示例 。 


【代码 7-60】 SystemJS 规范 中 index.html 示例 代码 : index.html 


01 <!DOCTYPE html> 
02 <html lang="en"> 


03 <head> 

04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width，initial-scale=1.0"> 
06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>SystemJS</title> 

08 </head> 

09 <body> 

10 <div id="mydiv">body</div> 

<script type="text/javascript" src="jquery.js"></script> 
12 <script type="text/javascript" src="system.js"></script> 
13 <script> 

14 System.import ('./main.js') 

5 .then(function (m) { 

16 console.1log (m) 7 

17 1 

18 </script> 


19 </body> 
20 </html> 


如 果 想 在 本 地 服务 器 上 运行 index.html 页 面 ， 那 么 可 以 在 Visual Studio Code 中 安装 本 地 
服务 器 lite-server。 在 根 目录 下 新 建 bs-config.json， 配 置 内 容 如 代码 7-61 所 示 。 
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【代码 7-61】 bs-config.json 示例 代码 : bs-configjson 


01 和 

02 wpPorEw B0007 

03 "files": ["./systemjs/**/*.{html,htm,css,js}"], 
04 "server": { "baseDir": "./systemjs" } 

05 } 


为 了 能 通过 本 地 服务 器 运行 index.html， 需 要 在 package.json 文件 脚本 中 配置 "systemjs": 
"lite-server"， 这 样 就 可 以 在 命令 行 中 用 npm run systemjs 来 启动 本 地 服务 器 了 。 成 功 启 动 后 ， 
可 以 输出 如 下 结果 ， 如 图 7.10 所 示 。 


D SystemJs 


€ CGC © localhost:8000 


age=31 


图 7.10 SystemJS 模块 示例 运行 结果 图 


6. ES6 规范 


现在 ES6 规范 支持 模块 化 ， 根 据 规 范 可 以 直接 用 import 和 export 在 浏览 器 中 导入 和 导出 
模块 。 一 个 js 文件 代表 一 个 js 模块 。 目 前 浏览 器 对 ES6 模块 支持 程度 不 同 ， 一 般 都 要 借助 工 
具 进 行 转换 ， 如 使 用 babelJS 把 ES6 代码 转化 为 兼容 ES5 版 本 的 代码 。 

ES6 模块 的 基本 特点 : 每 一 个 模块 只 加 载 一 次 ， 每 一 个 模块 内 声明 的 变量 都 是 局 部 变量 ， 
不 会 污染 全 局 作用 域 ; 模块 内 部 的 变量 或 者 函数 可 以 通过 export 导出 ; 一 个 模块 可 以 用 import 
导入 其 他 模块 。 

第 一 步 ， 新 建 一 个 moduleAijs 文件 。 首先 定 义 一 个 obj 对 象 ， 并 用 export 导出 obj。 代 码 
7-62 给 出 ES6 模块 moduleAjs 示例 代码 。 


【代码 7-62】 ES6 模块 moduleAjs 示例 代码 : moduleAjs 


01 Var obj ={ 


02 name: ‘'Jack', 
03 age: 31 
04 入 


05 export {obj}; 


第 二 步 ， 新 建 一 个 moduleB.js 文件 。 首 先 用 import {obj} from "./moduleA" 导 入 模块 中 的 
obj 对 象 ， 然 后 就 可 以 在 moduleB.js 中 直接 进行 调用 了 ， 最 后 用 export {func} 导 出 本 模块 定义 
的 对 象 func。 代 码 7-63 给 出 ES6 模块 moduleB.js 示例 代码 。 
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【代码 7-63】 ES6 模块 moduleB.js 示例 代码 : moduleB.js 


01 import {obj} from "./moduleA"; 
02 Var func = { 


03 showName: function () { 
04 console.log(obj.name); 
05 }, 

06 getAge: function () { 

07 return obj.age; 

08 } 

09 pe 


10 export {func}; 


第 三 步 , 新 建 一 个 入 口 文件 man.js。 使 用 import {func} from "./moduleB" 导 入 模块 中 的 func 
对 象 ， 这 样 就 可 以 调用 func.showName 方法 了 。 代 码 7-64 给 出 ES6 模块 man.js 示例 代码 。 


【代码 7-64】 ES6 模块 man.js 示例 代码 : man.js 


01 import {func} from "./moduleB"; 
02 console.log (func) 


03 func.showName () 7 
第 四 步 ， 目 前 浏览 器 对 ES6 模块 支持 还 不 太 好 ， 不 能 直接 在 浏览 器 中 运行 ， 可 利用 
babel-node 工具 来 运行 。babel-node 提供 了 在 命令 行 直接 运行 ES6 模块 文件 的 便捷 方式 。 在 
Visual Studio Code 中 配置 启动 项 package.json， 如 代码 7-65 所 示 。 
【代码 7-65】 package.json 示例 代码 : package.json 


01 1 

02 "name": "oop", 

03 myersion™s "li. O00 

04 description™s ny 

05 el 

06 "es6": "babel-node es6/main.js --plugins @babel/plugin-transform- 
modules-commonjs" 

07 ]} 7 

08 "devDependencies": { 

09 "@babel/core": "^7.1.2"， 

10 "@babel/node": "^7.2.0", 

了 "@babel/plugin-transform-modules-commonjs": "^7.2.0" 

12 }, 

了 "author": "jackwang", 

14 "license": “ISC" 

5 } 


由 此 可 见 ，ES6 模块 机 制 的 语法 还 是 非常 简单 明了 的 ， 希 望 各 主流 浏览 器 都 能 早日 支持 
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ES6 模块 规范 。 调 试 运 行 ， 可 以 输出 如 图 7.11 所 示 的 结果 。 


PS C:\Src\chartper7> npm run es6 


> oo0p@1.0.0 es6 C:\Src\chartper7 
> babel-node es6/main.js --plugins @babel/plugin-transform-modules-commonjs 


{ showName: [Function: showName], getAge: [Function: getAge] } 
Jack 
pS C:\Src\chartper7> 


图 7.11 ES6 模块 示例 运行 结果 图 
模块 加 载 的 最 佳 实践 为 : 


尽 可 能 地 在 顶层 导出 。 

模块 里 避免 使 用 命名 空间 。 

仅 导 出 单个 class 或 function， 可 使 用 export default。 
要 导出 多 个 对 象 时 ， 可 把 它们 放 在 顶层 里 导出 。 

导入 时 明确 地 列 出 导入 的 名 字 。 
导入 大 量 模块 时 使 用 命名 空间 。 

TypeScript 会 根据 编译 时 指定 的 模块 目标 参数 生成 相应 的 供 CommonJS、AMD、UMD、 
SystemJS 或 ES6 模 块 加 载 系统 使 用 的 代码 。tsconfigjson 中 compilerOptions 对 象 有 一 个 module 
属性 ， 可 以 用 来 指定 模块 目标 ， 支 持 的 值 有 'none'、'commonjs'、'amd'、'system'、'umd'、'es2013' 
和 'esnext。 因 此 ， 可 以 用 如 下 命令 生成 commonjs 的 模块 系统 : 


tsc --module commonjs.\ts\main.ts 


一 自动 生成 的 模块 文件 可 能 还 需要 手动 进行 调整 才能 跑 起 来 。 | 


7.5.2 ”定义 外 部 模块 


TypeScript 与 ECMAScript 2015 一 样 , 任何 包含 顶级 import 或 者 export 的 文件 都 被 当成 一 
个 模块 。 相 反 ， 如 果 一 个 文件 不 带 有 顶级 的 import 或 者 export 声明 ， 那 么 它 的 内 容 被 视 为 全 
局 可 见 的 (因此 对 模块 也 是 可 见 的 〉。 

任何 声明 (比如 变量 、 函 数 、 类 、 类 型 别名 或 接口 都 能 够 通过 添加 export 关键 字 来 导 
出 。 在 一 个 文件 (模块 》 中 使 用 其 他 模块 的 功能 时 就 需要 用 import 关键 字 来 导入 。 

模块 导出 使 用 关键 字 export。 下面 新 建 一 个 IPerson.ts 文件 , 在 其 中 声明 一 个 接口 IPerson， 
并 用 export interface IPerson 定义 外 部 模块 。 代 码 7-66 给 出 IPerson 接口 外 部 模块 示例 代码 。 


【代码 7-66】 1IPerson 接口 外 部 模块 示例 代码 : IPerson.ts 


01 // IPerson.ts 
02 export interface IPerson{ 
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03 QQ strings 
04 name: string; 
05 age: number; 
06 walk() 7 

07 eat (); 

08 } 


新 建 一 个 文件 Person.ts。 在 Visual Studio Code 中 编辑 class Person implements IPerson 的 时 
候 , 编辑 器 可 能 会 自动 用 import { IPerson } from "./IPerson" 帮 我 们 导入 模块 。 最 后 , 可 以 用 ES6 
的 语法 export { Person } 导 出 模块 。 代 码 7-67 给 出 Person 类 外 部 模块 示例 代码 。 


【代码 7-67】 Person 类 外 部 模块 示例 代码 : Person.ts 


01 //Person.ts 
02 import { IPerson } from "./IPerson"; 


03 class Person implements IPerson{ 

04 walk() { 

05 console.log(this.name + " walk"); 
06 } 

07 eat() { 

08 console.log(this.name + " eating"); 
09 } 

10 constructor (name: string){ 

a this.name = name; 

Lb } 

hie id: string; 

14 name: string; 

15 age: number; 

16 } 


17 export { Person }; // 导 出 模块 


卫 下 17 行 export { Person } 的 {不 能 省 略 ， 否 则 会 出 现 错误 。 | 


为 了 测试 Person 类 是 否 可 以 正常 运行 , 可 以 新 建 一 个 PersonTest.ts 文件 。 首先 利用 import 
{ Person } from "./Person" 导 入 类 Person, 然后 用 new Person("jack") 创 建 类 的 实例 并 调用 实例 上 
的 walk 方 法。 代码 7-68 给 出 PersonTest 示例 代码 。 


【代码 7-68】 PersonTest 示例 代码 : PersonTest.ts 


01 //PersonTest.ts 

02 import { Person } from "./Person"; 
03 let person = new Person("jack"); 
04 console.log (person.walk()); 


由 于 是 多 个 ES6 模块 文件 , 目前 还 不 能 直接 运行 , 因此 我 们 需要 用 tsc 编译 器 将 ES6 文件 
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编译 成 commonjs 规范 的 文件 后 再 运行 。 命 令 如 下 : 

tsc --module commonjs .\PersonTest 

若 在 Visual Studio Code 中 直接 运行 JS 文件 ， 则 可 用 扩展 Code Runner 工具 包 。 用 快捷 键 
Ctrl+AlttN 和 运行， 用 Ctrl+AltrM 结束 运行 。 安 装 完成 扩展 Code Runner 工具 包 后 ， 打 开 
PersonTestjs 文件 ， 然 后 用 快捷 键 Ctrl+Alt+N 运行 ， 结 果 如 图 7.12 所 示 。 


上 PersonTestjs xX 也 
1 "use strict"; 
2 exports._esModule = true; 
3 //PersonTest.ts 
4 var Person_1 = require("./Person"); 
5 var person = new Person_1.Person("jack"); 
6 console.log(person.walk()); 


者 
己 


PROBLEMS OUTPUT DEBUGCONSOLE TERMINAL Code 
[Running] node "c:\Src\charpter7\module\PersonTest.js" 


jack walk 
undefined 


[Done] exited with code=9 in 8.299 seconds 


图 7.12 Code Runner 运行 JS 结果 图 
使 用 TypeScript 的 一 个 好 处 就 是 ， 可 以 将 代码 编译 为 各 种 规范 的 JS 文件 ， 因 此 也 可 以 用 
如 下 命令 将 ES6 的 代码 编译 为 amd 规范 的 JS 文件 : 
tsc --module amd .\PersonTest.ts 


我 们 有 时 希望 在 导入 和 导出 模块 的 时 候 对 导入 或 者 导出 的 对 象 名 进行 重 命名 。 模 块 导入 和 
导出 时 默认 使 用 内 部 对 象 的 名 称 。TypeScript 也 支持 在 导出 前 和 导入 后 进行 重 命名 。 导 入 和 导 
出 模块 时 ， 用 as 关键 字 对 模块 进行 重 命 名 。 例 如 ， 将 代码 7-66 中 的 IPerson.ts 进行 改造 ， 内 
容 如 代码 7-69 所 示 。 

【代码 7-69】 1IPerson 导出 重 命名 示例 代码 : IPerson2.ts 


01 interface IPerson{ 


02 id: string; 
03 name: string; 
04 age: number; 
05 walk(); 

06 eat () 7 

07 } 


08 ”// 导 出 重 命名 
09 export { IPerson as IMan }; 


在 代码 7-69 中 ，09 行 用 export { IPerson as IMan } 将 接口 名 称 IPerson 重 命名 为 IMan， 这 
样 导 出 的 时 候 只 能 导入 IMan 而 不 是 IPerson。 
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用 import 导入 模块 的 时 候 ， 可 以 对 模块 中 的 对 象 名 进行 重 命名 。 这 里 新 于 


文件 ， 其 内 容 如 代码 7-70 所 示 。 


【代码 7-70】 Person 导入 模块 重 命名 示例 代码 : Person2.ts 


bE 一 个 Person2.ts 


【代码 7-71】 PersonTest2 导入 模块 重 命名 示例 代码 : PersonTest2.ts 


\ 


16 
17 
18 


//Person2 .ts 


import { IMan as IPerson } from "./IPerson2"; 


class Person implements IPerson{ 
walk() { 
console.log(this.name + " walk"); 
} 
eat() { 
console.log(this.name + " eating"); 
} 
constructor (name:string){ 
this.name = name; 
¥ 
id: string; 
name: string; 


age: number; 


. 
// 导 出 重 命名 


export { Person as Man}; 


代码 7-70 中 02 行 的 import { IMan as IPerson } from "./IPerson2" 将 导入 的 IMan 对 象 重 名 
为 IPerson， 同 时 18 行 用 export { Person as Man} 将 类 名 Person 重 名 为 Man。 这 里 新 建 一 个 
PersonTest2.ts 文件 ， 其 内 容 如 代码 7-71 所 示 。 


01 
02 
03 
04 


//PersonTest2.ts 

import { Man as Person } from "./Person2"; 
let person = new Person("jack"); 
console.log (person.walk()); 


当 导 出 的 模块 重 命名 后 ， 导 入 时 重 命名 前 的 模块 名 要 与 导出 重 命名 后 的 模块 名 保持 一 致 ， | 


否则 编译 器 将 提示 错误 信息 。 
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如 果 在 导入 模块 的 时 候 , 不 知道 导入 模块 文件 中 有 什么 名 称 , 那么 可 以 用 * 代 蔡 。 代 码 7-72 
给 出 用 * 导 入 模块 的 示例 。 


【代码 7-72】 用 * 导 入 模块 示例 代码 : PersonTest3.ts 


01 
02 


//PersonTest3.ts 
import * as PersonNS from "./Person"; 
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03 let person = new PersonNS .Man("jack"); 
04 console.log (person.walk()); 


到 用 * 导 入 模块 时 必须 用 as 重 命 名 。 | 


模块 不 但 可 以 导出 和 导入 一 个 对 象 , 还 可 以 同时 导入 和 导出 多 个 对 象 。 通常 情况 下 , 模块 
里 会 定义 多 个 对 象 , 然后 一 起 导出 供 外 部 调用 。 导 入 的 模块 也 可 以 根据 实际 需要 , 一 次 导入 多 
个 模块 对 象 。 下 面 新 建 一 个 IConstract.ts 文件 ， 然 后 在 其 中 定义 两 个 对 象 ， 一 个 接口 IPerson， 
一 个 枚 举 Sex, 并 通过 export { IPerson as IMan,Sex } 导 出 多 个 对 象 。 代码 7-73 给 出 IConstract.ts 
的 示例 代码 。 


【代码 7-73】 1Constract 导出 多 个 对 象 的 示例 代码 : IConstract.ts 


01 //IConstract.ts 
02 interface IPerson{ 


03 id: string; 
04 name: string; 
05 age: number; 
06 walk() 7 

07 eat (); 

08 } 

09 enum Sex{ 

10 Man, 

11 Female 

2 } 

13 ”// 导 出 多 个 


14 export { IPerson as IMan,Sex }; 


在 代码 7-73 中 ，14 行 用 export { IPerson as IMan,Sex } 将 多 个 对 象 进行 导出 ， 并 将 第 一 个 
对 象 IPerson 重 命名 为 IMan。 

新 建 一 个 Constractts， 用 import { IMan as IPerson, Sex } from "IConstract" 来 导入 模块 
IConstract 文件 中 的 多 个 对 象 ， 其 中 还 可 以 用 as 对 导入 的 对 象 进行 重 命名 。 代 码 7-74 给 出 
Constract.ts 的 示例 代码 。 


【代码 7-74】 Constract 导入 多 个 对 象 的 示例 代码 : Constract.ts 


01 //Constract.ts 

02 ”// 导 入 多 个 

03 import { IMan as IPerson, Sex } from "./IConstract"; 
04 class Person implements IPerson{ 


05 walk() { 

06 console.log(this.name + " walk"); 
07 } 

08 eat() { 
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09 console.log(this.name + " eating"); 
10 } 

dl constructor (name:string,sex:Sex = Sex.Man){ 
12 this.name = name; 

13 this.sex = sex; 

14 } 

15 ids string; 

16 name: string; 

1 age: number; 

18 Sex:Sex ; 

19 } 

20 ”// 导 出 


2 export { Person}; 


TypeScript 支持 模块 的 默认 导出 ， 一 个 模块 的 默认 导出 只 能 有 一 个 。 默 认 导出 对 象 使 用 
default 关键 字 。 与 一 般 模块 导入 导出 不 同 的 是 , 导出 默认 的 对 象 不 能 用 大 括号 {} 将 对 象 名 包含 
起 来 ， 导 入 默认 导出 的 模块 对 象 时 ， 可 以 直接 指定 导入 的 模块 名 称 ， 不 能 用 大 括号 f} 插 起 来 。 

新 建 一 个 IConstract2.ts 文件 。 代 码 7-75 给 出 IConstract2.ts 的 示例 代码 。 


【代码 7-75】 导出 默认 对 象 的 示例 代码 : IConstract2.ts 


01 //IConstract2.ts 
02 interface IPerson{ 


03 id: string; 
04 name: string; 
05 age: number; 
06 walk(); 

07 eat (); 

08 . 

09 enum Sex{ 

10 Many 

:eT Female 

12 } 


13 ”// 默 认 不 能 重 命名 

14 //export default IPerson as IMan; 

415 export default IPerson; 

16 export {Sex}; 

在 代码 7-75 中 ,用 export default IPerson 将 对 象 IPerson 默 认 导 出 , 同时 还 可 以 用 export {Sex} 
导出 对 象 Sex。 


| 默认 导出 的 模块 对 象 不 能 重 命名 。 | 


下 面 新 建 一 个 Constract2.ts 文件 , 首先 用 import IPerson, { Sex } from "/IConstract2" 将 模块 
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对 象 导 入 。 注 意 ， 导 入 默认 导出 的 对 象 IPerson 是 不 能 用 的。 代码 7-76 给 出 Constract2.ts 的 
示例 代码 。 
【代码 7-76】 导入 默认 对 象 的 示例 代码 : Constract2.ts 


01 //Constract2.ts 

02 ”// 导 入 默认 ， 不 能 用 {} 

03 import IPerson, { Sex } from "./IConstract2"; 
04 class Person implements IPerson{ 


05 walk() { 

06 console.log(this.name + " walk"); 
07 } 

08 eat() { 

09 console.log(this.name + " eating"); 
10 } 

3 constructor (name:string, sex:Sex = Sex.Man){ 
4 this.name = name; 

13 this.sex = sex; 

14 } 

15 id: string; 

16 name: string; 

开学 age: number; 

18 Sex:Sex ; 

9 

20 。 // 导 出 默认 


cB export default Person; 


, 品 Typescript 如 何 解析 模块 


模块 解析 是 指 编译 器 在 查找 导入 模块 内 容 时 所 遵循 的 流程 。 假 设 有 一 个 导入 语句 “import 
{m } from "moduleA";”， 为 了 检查 导入 的 m 模块 是 如 何 使 用 的 ， 编 译 器 需要 准确 地 知道 它 表 
示 什 么 ， 并 且 需 要 检查 它 的 定义 moduleA 。 


7.6.1 模块 导入 路 径 解析 


模块 导入 时 的 路 径 分 为 相对 路 径 和 非 相对 路 径 ， 不 同类 型 的 路 径 会 以 不 同 的 方式 进行 解 
析 。 相 对 路 径 导 入 模式 是 以 “/”“./” 或 “./” 开 头 的 。 例 如 : 

01 import models from "/components/models"; 

02 import { config } from /config"s 

03 import "../database/db"; 
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其 中 ，“./” 表 示 当 前 文件 的 目录 ，“../” 表 示 当 前 目录 的 上 一 级 目录 ，“/” 是 指 当前 文 
件 所 在 的 盘 符 根 目录 ， 如 C:\\。 所 有 其 他 形式 的 导入 被 当 作 是 非 相 对 的 ， 例 如 : 


01 import * as $ from "jQuery"; 

02 import { Component } from "@angular/core"; 

相对 导入 在 解析 时 是 相对 于 导入 它 的 文件 而 言 的 , 并 且 不 能 解析 为 一 个 外 部 模块 声明 。 我 
们 自己 写 的 模块 使 用 相对 导入 ， 这 样 能 确保 它们 在 运行 时 的 相对 位 置 。 

非 相对 模块 的 导入 可 以 相对 于 baseUrl 或 通过 路 径 映 射 来 进行 解析 ， 使 用 非 相对 路 径 来 导 
入 你 的 外 部 依赖 。 


7.6.2 ”模块 解析 策略 


共有 两 种 可 用 的 模块 解析 策略 : Node 和 Classic。 可 以 使 用 --moduleResolution 标记 来 指 
定 使 用 哪 种 模块 解析 策略 。 若 未 指定 ， 则 在 使 用 了 --module AMD | System | ES2015 时 的 默认 
值 为 Classic， 其 他 情况 时 则 为 Node。 

Classic 这 种 策略 在 以 前 是 TypeScript 默认 的 解析 策略 。 现 在 ， 它 存在 的 理由 主要 是 为 了 
向 后 兼容 。 相 对 导入 的 模块 是 相对 于 导入 它 的 文件 进行 解析 的 。 因 此 ，/root/srcmoduleA.ts 文 
件 里 的 import { b } from "./moduleB" 导 入 语句 会 使 用 下 面 的 查找 顺序 : 


/root/src/moduleB.ts 
/root/src/moduleB.d.ts 


对 于 非 相对 模块 的 导入 , 编译 器 会 从 包含 导入 文件 的 目录 开始 依次 向 上 级 目录 遍历 , 尝试 
定位 匹配 的 声明 文件 .假设 在 /root/sre/moduleA.ts 文件 里 有 一 个 对 moduleB 模块 的 非 相对 导入 ， 
那么 import { b } from "moduleB" 语 句 会 以 如 下 顺序 来 查找 moduleB: 


/root/src/moduleB.ts 
/root/src/moduleB.d.ts 
/root/moduleB.ts 
/root/moduleB.d.ts 
/moduleB.ts 
/moduleB.d.ts 


Node 这 个 解析 策略 在 运行 时 按照 Node.js 模块 的 解析 机 制 来 解析 模块 。 通常， 在 Nodejs 
里 导入 是 通过 require 函数 调用 进行 的 ,Node.js 会 根据 require 的 是 相对 路 径 还 是 非 相 对 路 径 做 
出 不 同 的 行为 : 
(1) 如 果 X 是 内 置 模块 (如 require('http') ) 
a. 返回 该 模块 。 
b. 不 再 继续 执行 。 
人 
a. 根据 x 所 在 的 父 模块 ， 确 定 x 的 绝对 路 径 。 
b. 将 X 当成 文件 ， 依 次 查找 下 面 的 文件 ， 只 要 其 中 有 一 个 存在 ， 就 返回 该 文件 ， 不 再 继续 执行 。 
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XxX 
X JS 
X.json 
X.node 
c. 将 x 当成 目录 ， 依 次 查找 下 面 的 文件 ， 只 要 其 中 有 一 个 存在 ， 就 返回 该 文件 ， 不 再 继续 执行 。 
X/package.json (main 字段 ) 
X/index.js 
X/index.json 
X/index.node 
(3) 如 果 X 不 带路 径 
a. 根据 x 所 在 的 父 模块 ， 确 定 X 可 能 的 安装 目录 。 
b. 依次 在 每 个 目录 中 ， 将 x 当成 文件 名 或 目录 名 加 载 。 
(4) 抛 出 "not found" 


假设 是 相对 路 径 ， 为 /rootsrc/moduleAjs， 包 含 一 个 导入 require("./moduleB") 语 句 ， 那 么 
Node.js 以 下 面 的 顺序 解析 这 个 模块 moduleB: 

首先 检查 /root/src/moduleB.js 文件 是 否 存在 ， 存 在 则 导入 ; 不 存在 则 检查 /root/src/moduleB 
目录 中 是 否 包 含 一 个 package.json 文件 ， 如 果 包 含 package.json 且 packagejson 文件 指定 了 一 
个 "main" 模块 (假设 为 "main": "libymoduleBjs" ) ， 那 么 Nodejs 会 引用 
/root/src/moduleB/libs/moduleB.js。 

如 果 没 有 package.json 文件 , 就 检查 /root/sre/moduleB 目录 是 否 包含 一 个 index.js 文件 。 如 
果 没 有 找到 就 报错 。 

如 果 是 非 相 对 模块 名 的 解析 , Nodejs 会 在 文件 夹 node_module 里 查找 模块 。node_modules 
可 能 与 当前 文件 在 同一 级 目录 或 者 在 上 层 目录 里 。Node.js 会 向 上 级 目录 遍历 ， 查 找 每 个 
node_modules 直到 它 找 到 要 加 载 的 模块 。 

TypeScript 模仿 Nodejs 运行 时 的 解析 策略 在 编译 阶段 定位 模块 定义 文件 ,但 是 TypeScript 
在 Nodejs 解析 逻辑 基础 上 增加 了 TypeScript 源 文件 的 扩展 名 .ts，.tsx 和 .dts) 。 同时 ， 
TypeScript 在 package.json 里 使 用 字段 "types" 属 性 来 表示 类 似 "main" 的 意义 。 编 译 器 会 使 用 它 
来 找到 要 使 用 的 "main" 定 义 文件 。 

假如 在 /root/src/moduleA.ts 里 有 一 个 模块 导入 语句 import { b } from "./moduleB"， 则 会 以 
如 下 顺序 来 寻找 "./moduleB": 


/root/src/moduleB.ts 

/root/src/moduleB.tsx 

/root/src/moduleB.d.ts 
/root/src/moduleB/package.json (如 果 指定 了 "types" 属 性 ) 
/root/src/moduleB/index.ts 
/root/src/moduleB/index.tsx 
/root/src/moduleB/index.d.ts 


类 似 的 , 非 相对 的 导入 会 遵循 Node.js 的 解析 逻辑 ,首先 查找 文件 , 然后 是 合适 的 文件 夹 。 
因此 /root/src/moduleAits 文件 里 的 import { b } from "moduleB" 会 以 如 下 顺序 查找 "moduleB": 
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/root/src/node modules/moduleB.ts 

/root/src/node modules/moduleB.tsx 

/root/src/node _ modules/moduleB.d.ts 

/root/src/node modules/moduleB/package.json (如 果 指 定 了 "types" 属 性 ) 
/root/src/node modules/moduleB/index.ts 

/root/src/node modules/moduleB/index.tsx 

/root/src/node modules/moduleB/index.d.ts 

/root/node modules/moduleB.ts 

/root/node modules/moduleB.tsx 

/root/node modules/moduleB.d.ts 
/root/node_modules/moduleB/package.json (如 果 指 定 了 "types" 属 性 ) 
/root/node modules/moduleB/index.ts 

/root/node modules/moduleB/index.tsx 

/root/node modules/moduleB/index.d.ts 

/node modules/moduleB.ts 

/node modules/moduleB.tsx 

/node modules/moduleB.d.ts 
/node_modules/moduleB/package.json (如 果 指 定 了 "types" 属 性 ) 
/node modules/moduleB/index.ts 

/node modules/moduleB/index.tsx 

/node modules/moduleB/index.d.ts 


有 时 工程 源码 结构 与 输出 结构 不 同 , 通常 要 经 过 一 系统 的 构建 步骤 , 最 后 生成 输出 , 包括 
将 .ts 编译 成 js、 将 不 同位 置 的 依赖 复制 到 一 个 输出 位 置 。 最 终结 果 就 是 运行 时 的 模块 名 与 包 
含 它 们 声明 的 源 文件 里 的 模块 名 不 同 .或 者 最 终 输出 文件 里 的 模块 路 径 与 编译 时 的 源 文件 路 径 
不 同 。 

TypeScript 编译 器 有 一 些 额外 的 标记 , 用 来 通知 编译 器 在 源码 编译 成 最 终 输出 的 过 程 中 都 
发 生 了 哪些 转换 。 有 一 点 要 特别 注意 的 ,就 是 编译 器 不 会 进行 这 些 转换 操作 ,只 是 利用 这 些 信 
息 来 指导 模块 的 导入 。 


7.6.3 baseUrl 


在 利用 AMD 模块 加 载 器 的 应 用 里 使 用 baseUrl 是 常见 做 法 ， 要 求 在 运行 时 模块 都 被 放 到 
一 个 文件 夹 里 。 这 些 模块 的 源码 可 以 在 不 同 的 目录 下 , 但 是 构建 脚本 会 将 它们 集中 到 一 起 。 设 
置 baseUrl 来 告诉 编译 器 到 哪里 去 查找 模块 。 所 有 非 相对 模块 导入 都 会 被 当 作 相对 于 baseUrl。 
TypeScript 编译 器 通过 tsconfig.json 中 的 baseUrl 来 设置 。 


访 相对 模块 的 导入 不 会 被 设置 的 baseUnl 所 影响 ， 因 为 它们 总 是 相对 于 导入 它们 的 文件 。 | 
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7.6.4 路 径 映射 

有 时 模块 不 是 直接 放 在 baseUrl 下 面 。 比 如 "jquery" 模块 的 导入 ， 在 运行 时 可 能 被 解释 为 
"node_modules/jquery/dist/jquery.slim.min.js"。 加 载 器 使 用 映射 配置 来 将 模块 名 映射 到 运行 时 的 
文件 。TypeScript 编译 器 通过 使 用 tsconfig.json 文件 里 的 "paths" 来 支持 这 样 的 声明 映射 。 下 面 
是 一 个 如 何 指 定 jquery 的 "paths" 的 示例 : 


01 { 

02 "compilerOptions": { 

03 "baseUrl": "."，// paths 提供 的 话 ， 必 须 提 供 该 属性 

04 "athews 

05 "jquery": ["node modules/jquery/dist/jquery"] // 此 处 映射 是 相对 于 
"baseUr1" 的 

06 } 

07 

08 } 


芒 "paths" 是 相对 于 "baseUrl" 进 行 解析 的 。 | 


如 果 baseUrl 属性 被 设置 成 除 "." 外 的 其 他 值 ， 比 如 在 tsconfigjson 中 将 baseUrl 设置 为 
"/sre"， 那 么 jquery 应 该 映射 到 "../node_modules/jquery/dist/jquery"。 

通过 paths 属性 ， 还 可 以 指定 复杂 的 映射 ， 包 括 指 定 多 个 位 置 。 假 设 在 一 个 项 目 中 有 一 些 
模块 位 于 目录 A 中 ， 而 其 他 的 模块 位 于 目录 B 中 。 在 项 目 构 建 过 程 中 ， 可 以 用 工具 将 模块 集 
中 到 一 处 。 例 如 ， 某 个 项 目 目录 结构 如 下 : 


root 

HF folderl 

| 上 -一 filel.ts (imports 'folderl/file2' and 'folder2/file3') 
| [一 一 file2.ts 

上 -一 generated 

| Fo folderl 

| 一 一 folder2 

| eas 

[一 一 tsconfig.json 


那么 相应 的 tsconfigjson 文件 如 下 : 


01 { 

02 "compilerOptions": { 
03 DaaeUrel ne Ww 

04 "pathe”s { 

05 2 

06 人 

07 "generated/*" 
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这 个 tsconfigjson 告诉 编译 器 所 有 匹配 "*" 模 式 的 模块 导入 会 在 以 下 两 个 位 置 查找 : 


@@ "*" 表示 模块 名 字 不 变 ， 映 射 为 < 模块 名 > 的 路 径 将 转换 成 <baseUrl>/< 模 块 名 >。 
@@ "generated/*" 表 示 模 块 名 前 添加 路 径 generated 作为 前 组 ,映射 为 < 模块 名 > 的 路 径 将 转 
换 成 <baseUrl>/generated/< 模 块 名 >。 


在 对 filel.ts 中 的 导入 模块 语句 imports 'folder1/file2' 进行 解析 时 , 首先 匹配 "*" 模 式 且 通 配 
符 捕获 到 整个 文件 名 。folderl/file2 为 非 相 对 路 径 ， 需 要 结合 baseUrl 属性 值 来 进行 合并 ， 也 就 
是 root/folderl/file2.ts。 由 于 此 文件 存在 ， 因 此 导入 完成 。 

在 对 filel.ts 中 的 导入 模块 语句 imports 'folder2/file3' 进 行 解析 时 ， 首 先 匹 配 "*" 模 式 且 通 配 
符 捕获 到 整个 文件 名 。folder2/file3 为 非 相对 路 径 ， 需 要 结合 baseUrl 属性 值 来 进行 合并 ， 也 就 
是 rootfolder2/file3.ts。 由 于 此 文件 不 存在 ， 因 此 用 第 二 个 "generated/*" 进 行 匹配 。 可 以 匹配 到 
generated/folder2/file3 。 此 路 径 为 非 相 对 路 径 ， 需 要 与 baseUrl 进行 合并 ， 也 就 是 
root/generated/folder2/file3.ts， 此 文件 存在 ， 导 入 完成 。 

另外 , 可 以 利用 rootDirs 指定 虚拟 目录 。 有 时 多 个 目录 下 的 项 目 源 文件 在 编译 时 会 进行 合并 ， 
放 在 某 一 个 输出 目录 中 。 这 个 输出 目录 可 以 看 作 是 一 些 源 目录 的 一 个 虚拟 目录 。 利 用 rootDirs 属 
性 ， 可 以 告诉 编译 器 生成 这 个 虚拟 目录 ， 此 时 编译 器 就 可 以 在 虚拟 目录 中 解析 相对 模块 导入 ， 就 
好 像 不 同 的 目录 被 合并 到 一 个 输出 目录 中 一 样 。 例 如 ， 有 一 个 项 目的 目录 结构 如 下 : 


root 


上 

| [一 一 views 

| 一 一 viewl.ts (imports './templatel') 
| [一 一 view2.ts 

上 一 generated 


| 上 一 一 templates 
| -一 views 


| [一 一 templatel.ts (imports './view2') 

[一 一 tsconfig.json 

其 中 ，root 为 项 目 根 目 录 ，src/views 里 的 文件 是 视图 文件 代码 ， 这 些 视图 文件 需要 导入 视 
图 模板 模块 。generated/templates 是 视图 模板 ， 在 构建 过 程 中 可 以 通过 工具 将 /src/views 和 
/generated/templates/views 两 个 目录 中 的 文件 复制 到 同一 个 目录 下 。 在 运行 时 ，src/views 中 的 
视图 文件 可 以 假设 generated/templates 模板 与 它 同 在 一 个 目录 虚拟 目录 下 ， 因 此 可 以 使 用 相对 
路 径 导 入 "./templatel"。 

rootDirs 属性 是 一 个 数组 ， 可 以 指定 一 个 roots 虚拟 目录 数组 列表 ， 列 表 里 的 内 容 会 在 运 
行 时 合并 。 这 个 tsconfig.json 内 容 如 下 : 
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01 { 

02 "compilerOptions": { 

03 uootDireu rl 

04 "src/views", 

05 "generated/templates/views" 
06 ] 

07 } 

08 } 


每 当 编译 器 在 rootDirs 的 子 目录 下 发 现 了 相对 模块 导入 , 就 会 尝试 从 每 一 个 rootDirs 中 导 
入 。rootDirs 的 灵活 性 不 仅仅 在 于 其 指定 了 要 在 逻辑 上 合并 的 物理 目录 列表 ， 还 体现 在 它 提供 
的 数组 可 以 包含 任意 数量 的 任何 名 字 的 目录 ， 不 论 它们 是 否 存在 。 

这 允许 编译 器 以 类 型 安全 的 方式 处 理 复杂 捆绑 (bundles〉 和 运行 时 的 特性 ， 比 如 条 件 引 
入 和 工程 特定 的 加 载 器 插件 。 

设想 这 样 一 个 国际 化 的 场景 ,构建 工具 自动 插入 特定 的 路 径 记 号 来 生成 针对 不 同 区 域 的 捆 
绑 ， 比 如 将 #{flocale} 作 为 相对 模块 路 径 .l#flocale}j/messages 的 一 部 分 。 在 这 个 假定 的 设置 下 ， 
工具 会 枚 举 支持 的 区 域 ， 将 抽象 的 路 径 映 射 成 .zh/messages、./de/messages 等 。 

利用 rootDirs 可 以 让 编译 器 了 解 这 个 映射 关系 ， 从 而 允许 编译 器 安全 地 解 
析 ./#{locale}/messages， 即 使 这 个 目录 不 存在 。 此 时 的 tsconfig.json 内 容 如 下 : 


01 { 

02 "compilerOptions": { 
03 "rootDirs™s [ 

04 ba ep hi 

05 "src/en", 

06 "src/#{locale}" 
07 ] 

08 } 

09 } 


编译 器 现在 可 以 将 import messages from './#{locale}/messages' 解 析 为 import messages from 
'/zh/messages' 和 import messages from './en/messages'。 

虽然 编辑 器 进行 模块 解析 时 有 一 定 的 规则 可 循 ,但 是 编译 器 在 解析 模块 时 可 能 访问 当前 文 
件 夹 之 外 的 文件 。 这 会 导致 很 难 诊断 模块 为 什么 没有 被 解析 。 为 了 了 解 模块 解析 的 具体 步 又， 
可 以 通过 开启 编译 器 选项 --traceResolution 来 启用 模块 解析 跟踪 。 

假设 有 一 个 TypeScript 项 目 ， 其 项 目 目录 如 下 : 

root 

| 一 node modules 

| 上 一 一 一 typescript 

| [一 

| 一 一 一 typescript.d.ts 


-一 一 一 src 


275 


tseonrio sen 


假设 在 这 个 项 目 中 的 app.ts 里 有 import * as ts from "typescript" 导 入 语句 ， 那 么 在 用 tsc 编 
译 时 可 以 开启 --traceResolution 选项 来 跟踪 模块 解析 。 如 果 这 里 只 建立 一 个 项 目 目录 和 文件 ， 
并 执行 如 下 命令 : 


tsc --traceResolution 


输出 结果 如 图 7.13 所 示 。 


PS C:\Src\Ce7\root> tsc --traceResolution 


======== Resolving module ‘typescript from ‘C:/Src/Ce7/root/src/app.ts’. ======== 
Module resolution kind is not specified, using ‘Node]s". 

Loading module ‘typescript from ‘node_modules’ folder, target file type ‘TypeScript’. 
Directory *C:/Src/Ce7/root/src/node modules’ does not exist, skipping all lookups in it. 
File 'C:/Src/Ce7/root/node_modules/typescript/package.json’ does not exist. 


File ‘C:/Src/Ce7/root/node_modules/typescript.ts' does not exist. 

File ‘C:/Src/Ce7/root/node_modules/typescript.tsx" does not exist. 

File ‘C:/Src/Ce7/root/node_modules/typescript.d.ts" does not exist. 
File 'C:/Src/Ce7/root/node_modules/typescript/index.ts" does not exist. 
File 'C:/Src/Ce7/root/node_modules/typescript/index.tsx" does not exist. 


File 'C:/Src/Ce7/root/node_modules/typescript/index.d.ts’ does not exist. 

Directory 'C:/Src/Ce7/root/node_modules/@types’ does not exist, skipping all lookups in it. 
Directory 'C:/Src/Ce7/node_modules’ does not exist, skipping all lookups in it. 
Directory *C:/Src/node_modules’ does not exist, skipping all lookups in it. 

Directory *C:/node_modules’ does not exist, skipping all lookups in it. 

Loading module “typescript" from ‘node modules' folder, target file type ‘Javascript". 
Directory 'C:/Src/Ce7/root/src/node_modules’ does not exist, skipping all lookups in it. 
File ‘C:/src/Ce7/root/node_modules/typescript/package.json’ does not exist. 

File ‘C:/Src/Ce7/root/node_modules/typescript.js' does not exist. 

File 'C:/Src/Ce7/root/node_modules/typescript.jsx" does not exist. 

File 'C:/Src/Ce7/root/node_modules/typescript/index.js" does not exist. 

File 'C:/src/Ce7/root/node_modules/typescript/index.jsx” does not exist,. 

Directory 'C:/Src/Ce7/node_modules’ does not exist, skipping all lookups in it. 
Directory 'C:/Src/node_modules’ does not exist, skipping all lookups in it. 

Directory *C:/node_modules’ does not exist, skipping all lookups in it. 

======== Module name ‘typescript’ Was not resolved. ======== 

src/app,ts:1:21 - error T52387:; Cannot find module“'typescript 


| import * as ts from “typescript"; 


图 7.13 ”开启 traceResolution 解析 跟踪 的 结果 图 


从 图 7.13 可 以 看 出 ， 模 块 导 入 的 名 字 及 位 置 为 Resolving module 'typescript' from 
'C:/Src/C07/rootsrc/app.ts'。 编 译 器 使 用 的 策略 是 using 'NodeJs'。 开 启 解析 跟踪 后 ， 会 打印 出 模 
块 解 析 的 过 程 ， 这 有 助 于 我 们 排除 相关 错误 。 

从 图 7.13 可 以 看 出 ， 解 析 过 程 中 并 未 解析 目录 lib 下 的 typescript.dts， 但 是 它 解析 了 
\rootnode_modules\typescript 中 的 indexts 。 因 此 ， 可 以 新 建 一 个 index.ts 文件 ， 放 于 
\rootmode_modules\typescript 目录 中 。index.ds 内 容 如 下 : 


export namespace typescript{ } 


再 次 调用 命令 tsc --traceResolution， 输 出 结果 如 图 7.14 所 示 。 
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PS C:\Src\Ce7\root> tsc --traceResolution 

======== Resolving module ‘typescript” from 'C:/Src/C87/root/src/app.ts'， =-------- 

Hodule resolution kind is not specified, using Node]s'- 

Loading module “typescript’ from ‘node_modules" folder, target file type ‘TypeScript". 

Directory 'C:/Src/Ce7/root/src/node_modules’ does not exist, skipping all lookups in it. 

File 'C:/Src/Ce7/root/node_modules/typescript/package.json’ does not exist. 

File 'C:/Src/Ce7/root/node_modules/typescript.ts’ does not exist. 

File 'C:/Src/Ce7/root/node_modules/typescript.tsx" does not exist. 

File 'C:/Src/Ce7/root/node_modules/typescript.d.ts* does not exist. 

File ‘C:/Src/Ce7/root/node_modules/typescript/index.ts’ exist - use it as a name resolution result. 

Resolving real path for 'C:/Src/Ce7/root/node modules/typescript/index.ts', result ‘'C:/Src/Ce7/root/node modules/typescript/index.ts’. 
= Module nane “typescript' was successfully resolved to 'C:/Src/Ce7/root/node_modules/typescript/index.ts'. =- 


7.14 开启 traceResolution 正确 解析 跟踪 的 结果 图 


正常 来 讲 , 编译 器 会 在 开始 编译 之 前 解析 模块 导入 。 每 当 它 成 功 地 解析 了 一 个 文件 import 
语句 时 ， 这 个 文件 就 会 被 加 到 一 个 文件 列表 里 ， 以 供 编译 器 稍 后 处 理 。--noResolve 编译 选项 
告诉 编译 器 不 要 添加 任何 不 是 在 命令 行 上 传 入 的 文件 到 编译 列表 。 编 译 器 仍然 会 尝试 解析 模 
块 ， 但 是 只 要 没有 指定 这 个 文件 ， 那 么 它 就 不 会 被 包含 在 内 。 

//tsc .\src\app.ts .\src\moduleA.ts --noResolve 

import * as A from "./moduleA" // 正确 ，moduleA 在 tsc 命令 行 传 入 

import * as B from "./moduleB" // 错误 

使 用 --noResolve 编译 appts 文件 时 ， 可 以 正确 地 找到 moduleA， 因 为 它 在 tsc 命令 行 上 指 
定 了 moduleA.ts; 但 是 找 不 到 moduleB， 因 为 没有 在 命令 行 上 传递 moduleB 相关 信息 。 


了 . /声明 合并 


在 TypeScript 中 ， 声 明 合并 是 指 编译 器 将 针对 同一 个 名 字 的 两 个 独立 声明 合并 为 单一 声 
明 。 合并 后 的 声明 同时 拥有 原先 两 个 声明 的 特性 。 任 何 数量 的 声明 都 可 被 合并 。 

TypeScript 中 的 声明 合并 支持 命名 空间 、 接 口 和 类 。 下 面 对 接口 、 命 名 空间 和 类 的 声明 合 
并 进行 说 明 。 


7.7.1 合并 接口 


最 简单 也 最 常见 的 声明 合并 类 型 是 接口 合并 。 从 根本 上 说 , 合并 的 机 制 是 把 双方 的 成 员 放 
到 一 个 同名 的 接口 里 。 接 口 的 非 函数 成 员 应 该 是 唯一 的 。 如 果 它 们 不 是 唯一 的 , 那么 它们 必须 
是 相同 的 类 型 。 如 果 两 个 接口 中 同时 声明 了 同名 的 非 函 数 成 员 且 它们 的 类 型 不 同 , 则 编译 器 会 
报错 。 

对 于 函数 成 员 ， 每 个 同名 函数 声明 都 会 被 当成 这 个 函数 的 一 个 重 载 。 同 时 需要 注意 ， 当 接 
口 A 与 后 来 的 接口 A 合并 时 ， 后 面 的 接口 具有 更 高 的 优先 级 。 代 码 7-77 给 出 两 个 接口 IShape 
合并 的 示例 。 


【代码 7-77】 两 个 接口 IShape 合并 的 示例 代码 : IShape.ts 


01 interface IShape { 
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02 height: number; 
03 width: number; 
04 } 
05 interface IShape { 
06 scale: number; 
07 } 


08 let rect: IShape = {height: 5, width: 6, scale: 10}; 


代码 7-77 中 声明 了 两 个 同名 的 接口 IShape， 但 是 其 内 部 定义 的 属性 不 同 ， 接 口 进行 合并 


后 就 等 同 于 如 下 代码 : 
01 interface IShape { 
02 scale: number; 
03 height: number; 
04 width: number; 
05 } 


06 let rect: IShape = { height: 5, width: 6, scale: 10 }; 


二 每 组 接口 里 的 声明 硕 序 保持 不 变 , 但 各 组 接口 之 间 的 顺序 是 后 来 的 接口 重 载 出 现在 靠 前 位 | 
| 置 。 


7.7.2 合并 命名 空间 
与 接口 相似 , 同名 的 命名 空间 也 会 合并 其 成 员 。 对 于 命名 空间 的 合并 ,模块 导出 的 同名 接 
口 进 行 合 并 ， 构 成 单 一 命名 空间 包含 合并 后 的 接口 。 代 码 7-78 给 出 两 个 命令 空间 
com.wyd.merges 合并 的 示例 。 
【代码 7-78】 两 个 命名 空间 合并 的 示例 代码 : merges.ts 


01 namespace com.wyd.merges { 


02 export class DataAccess { } 
03 } 

04 namespace com.wyd.merges { 

05 export interface IData { 

06 Data: string; 

07 

08 export class Utils { } 

09 } 

代码 7-78 等 同 于 如 下 代码 : 

01 namespace com.wyd.merges { 

02 export class DataAccess { } 
03 export interface IData { 

04 Data: string; 
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05 } 
06 export class Utils { } 
07 } 


| 除了 这 些 导 出 成 员 进 行 合 并 外 , 我 们 还 需要 了 解 非 导 出 成 员 是 如 何 合并 的 。 非 导出 成 员 仅 
在 其 原 有 的 命名 空间 内 可 见 。 也 就 是 说 , 合并 之 后 ， 从 其 他 命名 空间 合并 进来 的 成 员 无 法 
| 访问 非 导 出 成 员 。 


7.7.3 合并 命名 空间 和 类 
命名 空间 可 以 与 其 他 类 型 的 声明 进行 合并 , 只 要 命名 空间 的 定义 符合 将 要 与 之 合并 类 型 的 
定义 ,合并 结果 包含 两 者 的 声明 类 型 .在 TypeScript 中 ,可 以 使 用 这 个 功能 去 实现 一 些 JavaScript 
里 的 设计 模式 。 命 名 空间 和 类 合并 的 示例 如 代码 7-79 所 示 。 
【代码 7-79】 命名 空间 和 类 合并 的 示例 代码 : namespae_class_merges.ts 


01 class MyAlbum { 


02 label: MyAlbum.show; 
03 . 

04 namespace MyAlbum { 

05 export class show { } 
06 } 


在 代码 7-79 中 ， 代 码 将 MyAlbum 类 和 MyAlbum 命名 空间 进行 合并 。 其 中 ，MyAlbum 
既是 命名 空间 也 是 类 。02 行 和 05 行 必须 匹配 ， 否 则 会 报错 。 


阳 / 趣 | 类 和 命名 空间 合并 的 时 候 ， 必 须 将 类 定义 放 在 命名 空间 之 前 ， 否 则 会 报错 。 | 


在 JavaScript 里 ， 创 建 一 个 函数 ， 稍 后 扩展 它 ， 增 加 一 些 属性 是 很 常见 的 。TypeScript 语 
言 中 使 用 声明 合并 可 以 达到 这 个 目的 , 并 且 保 证 类 型 的 安全 。 函数 和 命名 空间 合并 的 示例 如 代 
码 7-80 所 示 。 
【代码 7-80】 函数 和 命名 空间 合并 的 示例 代码 : namespae_function_merges.ts 


01 function buildString (name: string): string { 


02 return buildString.Prefix + name + buildString.suffix; 
03 

04 namespace buildString { 

05 export let suffix = "!"; 

06 export let prefix = "Hello, "; 

07 } 


08 console.log (buildstring ("TypeScript")); 
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TypeScript 并 不 支持 任何 类 型 的 合并 。 例 如 ， 类 不 能 与 其 他 类 或 变量 合并 ， 但 是 TypeScript 
[可 以 用 mixins 技术 来 模拟 类 的 合并 。 


7.7.4 全 局 扩展 

我 们 知道 ，JavaScript 可 以 随时 对 全 局 变量 window 进行 属性 和 方法 的 扩展 。 这 些 扩展 属 
性 和 方法 可 以 在 作用 域 范 围 内 任何 地 方 直 接 进行 访问 。 那 么 TypeScript 中 如 何 实现 全 局 扩展 
呢 ? 代码 7-81 给 出 全 局 扩展 示例 。 
【代码 7-81】 全 局 扩展 示例 代码 : globalExt.ts 


01 declare global { 


02 interface Window { 

03 jYd: any; 

04 } 

05 interface String { 

06 myExtMethod: () => void 
07 } 

08 // 全 局 变量 

09 const globalVar = 1; 

10 } 


11 ”//global 需要 
2 export { } 


13 window.jYd; // 扩 展 属性 
14 "hello".myExtMethod(); // 字 符 串 扩展 方法 
15 globalVar; // 全 局 变量 


在 代码 7-81 中 ， 用 declare global 来 声明 全 局 扩展 的 属性 和 方法 。02~04 行 通过 interface 
Window 接口 来 声明 一 个 window.jYd 属性 。05~07 行 通过 interface String 接口 来 声明 一 个 字符 
型 对 象 的 扩展 方法 myExtMethod。09 行 用 const globalVar = 1 声明 一 个 全 局 变量 globalVar, 这 
个 全 局 变量 可 以 在 其 他 文件 中 直接 使 用 。 

另外 ,在 TypeScript 中 的 已 有 模块 也 可 以 进行 扩展 。 假 设 有 一 个 模块 文件 moduleA.ts， 其 
内 容 如 代码 7-82 所 示 。 


【代码 7-82】 类 MyObject 示例 代码 : myObject.ts 


01 export class MyObject<T> { 
02 name:string = ""; 
03 了 


可 以 在 另外 一 个 文件 中 用 import { MyObject } from "./moduleA" 导 入 该 模块 ， 然 后 用 
declare module "./moduleA"” 并 结合 interface 对 其 模块 中 的 具体 对 象 进行 扩展 。 具 体 模块 扩展 的 
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示例 如 代码 7-83 所 示 。 
【代码 7-83】 已 有 模块 的 扩展 示例 代码 : myObjectExt.ts 


01 import { MyObject } from "./moduleA"; 
02 declare module "./moduleA" { 


03 interface MyObject<T> { 

04 getName () :string; 

05 ! 

06 } 

07 MyObject .prototype.getName = function () { 
08 return this.name; 

09 } 


10 let myobj = new MyObject (); 
eb myobj .getName (); 


模块 名 的 解析 和 用 import 和 export 解析 模块 标识 符 的 方式 是 一 致 的 。 当 这 些 声明 在 扩展 
中 合并 时 ， 就 好 像 在 原始 位 置 被 声明 一 样 。 但 是 ,不 能 在 扩展 中 声明 新 的 顶级 声明 ， 只 可 以 是 
扩展 模块 中 已 经 存在 的 声明 。 


蕊 也 可 以 在 模块 内 部 添加 声明 到 全 局 作用 域 中 。 | 


7.8 4 千 


本 章 是 全 书 的 一 个 重点 。 面 向 对 象 编 程 是 目前 非常 重要 的 一 种 编程 方式 。 相 对 于 面向 过 程 
而 言 ， 面 向 对 象 具 有 封装 、 继 承 、 多 态 等 特性 ， 因 此 可 以 设计 出 高 内 聚 低 耦 合 的 系统 ， 使 系统 
更 加 灵活 、 更 加 易于 维护 。 

本 章 从 面向 对 象 的 基本 概念 出 发 ,逐步 用 示例 演示 对 象 的 声明 、 类 的 声明 、 接口 的 声明 和 
命名 空间 的 声明 。 同 时 给 出 模块 定义 的 方法 , 介绍 了 模块 解析 的 基本 流程 ,对 于 理解 编译 器 如 
何 加 载 模块 是 非常 重要 的 。 最 后 介绍 了 声明 的 合并 ,其 中 包含 接口 的 合并 、 命 名 空间 的 合并 以 
及 命名 空间 和 类 等 的 合并 。 另 外 还 介绍 了 全 局 扩展 的 基本 方法 。 
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泛 型 是 TypeScript 语言 中 的 一 种 特性 。TypeScript 是 一 种 静态 类 型 语言 ， 函 数 或 方法 中 的 
参数 往往 都 是 有 类 型 限定 的 。 我们 在 编写 程序 时 ， 经 常会 遇 到 两 个 方法 的 功能 非常 相似 、 参 数 
个 数 也 一 样 ， 只 是 处 理 的 参数 类 型 不 同 。 例 如 ， 一 个 是 处 理 number 类 型 的 数据 ， 另 一 个 是 处 
理 string 类 型 的 数据 。 如 果 不 借助 泛 型 ， 那 么 一 般 需 要 写 多 个 方法 ， 分 别 用 来 处 理 不 同 的 数据 
类 型 。 

有 没有 一 种 办 法 , 在 方法 中 传 入 通用 的 数据 类 型 , 使 多 个 方法 合并 成 一 个 呢 ? 泛 型 就 是 专 
门 解决 这 个 问题 的 ， 可 将 类 型 参数 化 ， 以 达到 代码 复 用 、 提 高 代码 通用 性 的 目的 。 通 过 本 章 的 
学 习 ， 可 以 让 读者 了 解 泛 型 的 基本 概念 以 及 泛 型 变量 、 泛 型 函数 和 泛 型 类 的 基本 用 法 。 

本 章 主要 涉及 的 知识 点 有 : 


@ 泛 型 的 基本 概念 和 优势 
泛 型 变量 

泛 型 函数 

泛 型 类 

泛 型 约束 


号 ,]】 泛 型 的 定义 


泛 型 (generic type 或 者 generics) 是 程序 设计 语言 的 一 种 特性 。 泛 型 是 一 种 参数 化 类 型 。 
定义 函数 或 方法 时 的 参数 是 形 参 , 调用 此 函数 或 方法 时 传递 的 参数 值 是 实 参 。 那么 参数 化 类 型 
怎么 理解 呢 ? 

顾名思义 , 就 是 将 类 型 由 原来 具体 的 类 型 变 成 一 种 类 型 参数 , 然后 在 调用 时 才 传 入 具体 的 
类 型 作为 参数 ， 调 用 时 传 入 的 类 型 称 为 类 型 实 参 。 

在 使 用 过 程 中 , 泛 型 操作 的 数据 类 型 会 根据 传 入 的 类 型 实 参 来 确定 。 泛 型 可 以 用 在 类 、 接 
口 和 方法 中 ， 分 别 被 称 为 泛 型 类 、 泛 型 接口 和 泛 型 方法 。 泛 型 类 和 泛 型 方法 同时 具备 通用 性 、 
类 型 安全 和 性 能 ， 是 非 泛 型 类 和 非 泛 型 方法 无 法 具备 的 。 


泛 型 为 TypeScript 语言 编写 面向 对 象 程序 带 来 了 极 大 的 便利 和 灵活 性 。 泛 型 不 会 强行 对 值 
类 型 进行 装 箱 和 拆 箱 ， 或 对 引用 类 型 进行 强制 类 型 转换 ， 所 以 性 能 得 到 提高 。 泛 型 为 开发 者 提 
供 了 一 种 高 性 能 的 编程 方式 ， 能 够 提高 代码 的 重用 性 ， 并 允许 开发 者 编写 非常 优雅 的 代码 。 

至 此 ， 读 者 也 许 会 有 这 样 的 疑问 : 在 第 2 章 基本 语法 中 提 到 TypeScript 有 一 个 any 类 型 ， 也 
可 以 让 编译 器 不 检测 其 类 型 ， 传 入 各 种 类 型 参数 ， 那 么 any 类 型 和 泛 型 到 底 有 什么 区 别 呢 ? 假设 
现在 需要 编写 一 个 echo 函数 ， 该 函数 将 我 们 传 入 的 数据 进行 返回 ， 并 且 能 将 任何 类 型 的 数据 进 
行 输出 。 下 面 用 any 类 型 作为 参数 并 返回 any 类 型 。 代 码 8-1 给 出 echo 函数 的 示例 代码 。 


【代码 8-1】 echo 函数 的 代码 : 


ts001.ts 


01 
02 
03 
04 


function echo (msg:any) :any{ 


console.log (msg); 
return msg; 


} 


虽然 使 用 any 类 型 的 时 候 可 以 接收 任何 类 型 的 参数 , 但 是 实际 上 已 经 失去 函数 返回 值 类 型 
的 信息 。 假 如 传 入 一 个 字符 串 类 型 的 实 参 ， 编 译 器 只 知道 函数 echo 返回 的 是 any 类 型 的 值 
但 是 编译 器 不 能 推断 出 其 实 参 实 际 的 类 型 是 字符 类 型 。 换 句 话说 , 编译 器 不 能 在 此 函数 返回 值 
上 调用 实 参 类 型 本 身 所 内 置 的 方法 和 属性 。 
因此 , 我 们 需要 泛 型 技术 来 捕捉 实 参 的 类 型 ， 并 可 以 用 泛 型 来 表示 返回 值 的 类 型 。 泛 型 使 


用 的 是 类 型 参数 变量) ， 它 是 一 种 特殊 的 变量 ， 代 表 的 是 类 型 而 不 是 值 。 


泛 型 可 以 在 函数 、 接 口 和 类 中 使 用 ， 那 么 泛 型 函数 、 泛 型 类 和 泛 型 接口 该 如 何 定义 呢 ? 


8.1.1 


泛 型 函数 的 定义 


泛 型 函数 必须 使 用 < > 括 起 泛 型 类 型 参数 T， 跟 在 函数 名 后 面 ， 后 续 就 可 以 用 T 来 表示 此 
类 型 了 。 泛 型 函数 的 基本 语法 为 : 


function 函数 名 <T> (参数 1:7,.. 


} 


// 函 数 体 


.参数 n: 类 型 ) 


: 返回 类 型 { 


其 中 , 泛 型 函数 中 必须 在 函数 名 后 用 类 型 参数 <T> 来 定义 , 参数 既 可 以 没有 也 可 以 是 多 个 。 
一 般 情 况 下 ， 泛 型 函数 参数 中 都 有 一 个 用 T 定义 的 形 参 。 泛 型 函数 返回 类 型 既 可 以 用 T 来 定 
义 ， 也 可 以 是 其 他 类 型 。 


3.12 


泛 型 类 的 定义 


泛 型 类 必须 使 用 < > 括 起 参数 T， 跟 在 类 名 后 面 ， 后 续 就 可 以 用 T 来 表示 此 类 型 。 泛 型 类 
的 基本 语法 为 : 


class 类 名 <T> { 


} 


// 属 性 和 方法 签名 
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其 中 ， 类 中 的 属性 或 方法 都 需要 用 类 型 参数 T 来 约定 类 型 ， 否 则 声明 一 个 泛 型 类 也 就 失 
去 了 实际 意义 。 这 里 有 个 新 的 名 词 一 一 方法 签名 ， 是 由 方法 名 和 形 参 列表 共同 组 成 的 方法 头 。 


一 泛 型 类 中 只 能 包含 属性 和 方法 的 签名 ， 不 包含 具体 的 逻辑 实现 。 


8.1.3 


泛 型 接口 的 定义 


泛 型 接口 可 以 使 用 < > 括 起 泛 型 类 型 参数 T， 跟 在 接口 名 后 面 ， 后 续 就 可 以 用 T 来 表示 此 
类 型 。 泛 型 接口 的 基本 语法 为 : 


Interface 接口 名 <T> { 


上 


// 属 性 和 方法 签名 


副 无 法 创建 泛 型 枚 举 和 泛 型 命名 空间 。 


号 . 2 详解 泛 型 变量 


泛 型 变量 (generic type variables) 一 般 用 大 写字 母 T 表示， 如 果 有 多 个 不 同 的 泛 型 变量 ， 
可 以 同时 用 T、U 和 K 表示 。 泛 型 变量 T 必 须 放 于 < > 符号 中 才能 告诉 编译 器 是 一 个 泛 型 变量 ， 


而 不 是 一 个 普通 的 字母 。 
泛 型 变量 T 一 般 不 能 单独 出 现 ， 会 出 现在 函数 、 接 口 和 类 中 。 在 函数 体内 ， 由 于 编译 器 
并 不 知道 泛 型 变量 T 定 义 的 参数 的 具体 数据 类 型 ， 因 此 只 能 认为 其 为 任意 值 (any〉 类 型 。 换 


名 话说， 我 们 不 能 在 函数 体内 调用 泛 型 变量 T 可 能 存在 的 属性 和 方法 。 
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前 面 已 经 介绍 过 泛 型 函数 、 泛 型 接口 和 泛 型 类 的 基本 定义 语法 ， 下 面 的 代码 8-2 给 出 一 个 
泛 型 函数 示例 ， 以 说 明 泛 型 变量 在 使 用 上 的 一 些 注意 事项 。 


【代码 8-2】 entitySave 泛 型 函数 的 代码 : ts002.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


function entitySave<T> (entity: T) : boolean { 
let ret = false; 
Ew 
console.log("save entity to db"); 
//save (entity) 7 
ret = true; 
上 
catch (e) { 
ret = falsey 
console.log(e); 


EE } 

12 finally { 

hi return ret; 
14 } 

El } 


在 代码 8-2 中 ， 创 建 了 一 个 名 为 entitySave 的 泛 型 函数 ， 该 函数 接收 一 个 泛 型 类 型 参数 T 
作为 实体 , 这 个 函数 就 是 将 不 同 的 实体 对 象 保存 到 数据 库 中 进行 持久 化 。 如 果 保 存 成 功 就 返回 
true， 否 则 返回 false。 

在 泛 型 函数 entitySave 中 ， 传 入 的 参数 entity 类 型 是 T。 这 个 类 型 可 以 是 班级 实体 ， 也 可 
以 是 用 户 实体 , 还 可 以 是 其 他 基本 类 型 ， 如 字符 串 。 在 泛 型 函数 内 部 ， 编 译 器 并 不 知道 实 参 传 
入 的 参数 entity 到 底 是 什么 类 型 ， 因 此 不 能 访问 类 型 为 了 的 参数 中 的 属性 和 方法 。 

另外 ， 可 以 使 用 类 型 参数 (变量 ) T 作为 函数 参数 类 型 的 一 部 分 ， 而 非 全 部 。 例 如 ， 可 以 
将 参数 的 类 型 定义 为 T[]， 即 泛 型 类 型 数组 。 数 组 这 部 分 是 确定 的 ， 数 组 元 素 类 型 T 则 是 泛 型 
类 型 。 此 时 编译 器 可 以 识别 这 个 T[] 参 数 是 泛 型 类 型 的 数组 ， 因 此 可 以 调用 数组 本 身 的 内 置 属 
性 和 方法 。 


蕊 类 型 变量 一 般 用 T， 但 是 也 可 以 用 其 他 字符 ， 如 U。 | 


.了 详解 泛 型 函数 


泛 型 函数 必须 使 用 < > 括 起 泛 型 类 型 参数 T， 跟 在 函数 名 后 面 。 泛 型 函数 可 以 用 一 个 通用 
的 函数 来 处 理 不 同 的 数据 类 型 ， 从 而 提高 代码 的 可 重用 性 。 代 码 8-3 中 给 出 泛 型 函数 echo 示 
例 代 码 。 
【代码 8-3】 泛 型 函数 echo 的 示例 代码 : ts003.ts 


01 function echo<T> (msg:T) :T{ 


02 console.log (msg); 
03 return msg; 
04 } 


在 代码 8-3 中 ， 定 义 了 一 个 泛 型 函数 echo。 它 的 类 型 参数 是 T， 可 以 代表 任意 类 型 ， 函 数 
中 有 一 个 形 参 msg 为 T 类 型 ， 返 回 值 类 型 也 是 类 型 。 

其 实 可 以 把 类 型 参数 T 看 成 是 一 个 类 型 的 占 位 符 。 我 们 在 调用 的 时 候 才 会 给 出 类 型 参数 了 
实际 的 类 型 是 什么 。 一 旦 这 个 工 确定 类 型 了 ， 那 么 参数 msg 的 类 型 和 返回 值 的 类 型 也 就 确定 
了 。 此 时 ， 编 译 器 就 可 以 根据 传 入 的 实 参 msg 的 类 型 来 进行 代码 智能 提示 或 者 静态 类 型 检测 ， 
如 图 8.1 所 示 。 
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1 function echo<T>(msg:T):T{ 

2 console.log(msg); 

¥ return msg; 

a 

5 let ret = echo("hello"); 

6 ret. 

7 ® anchor (method) string.anchor(name: string): string 
9 Rehurns an <a> HTMI anrhor element and <ets the name atr © 
9 @ big 

19 ® blink 

11 ® bold 

12 ® charAt 

13 ® charCodeAt 

14 ® codepointat 

15 ® concat 

16 @ endswith 

by ©® fixed 

18 ® fontcolor 

19 ® fontsize 
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图 8.1 泛 型 可 以 捕获 实 参 类 型 进行 智能 提示 
我 们 定义 的 泛 型 函数 和 普通 函数 声明 一 样 , 可 以 用 函数 名 进行 调用 。 不 过 和 普通 函数 相 比 
还 存在 一 些 区 别 。 泛 型 函数 除了 需要 传 入 所 有 的 参数 外 ， 一 般 情况 下 还 需要 给 定 类 型 参数 T 
的 值 才能 调用 。 例 如 ， 调 用 泛 型 函数 echo 可 以 用 代码 8-4 表示 。 
【代码 8-4】 调用 泛 型 函数 echo 的 示例 代码 : ts004.ts 


01 let g = echo<string> ("hello world"); 
02 console.log (typeof 9g); J/ "string" 


在 代码 8-4 中 ， 明 确 地 将 泛 型 参数 T 指 定 为 string， 即 <string> ， 这 样 返回 值 msg 也 就 明 
确 其 类 型 了 ， 也 是 string。 

根据 代码 8-3 创建 的 泛 型 函数 echo 来 看 ，T 的 类 型 和 参数 msg 的 类 型 是 一 致 的 。 因 此 ， 
使 用 类 型 推断 ， 编 译 器 可 以 根据 传 入 的 参数 自动 为 T 指定 类 型 ， 如 代码 8-5 所 示 。 

【代码 8-5】 调用 泛 型 函数 echo 的 示例 代码 : ts005.ts 

01 let g = echo("hello world"); 

02 console.log(typeof g); //"string" 

在 代码 8-5 中 ， 并 未 显 式 地 向 尖 括 号 < > 内 传 入 string 类 型 ， 编 译 器 根据 传 入 的 参数 msg 
值 为 "hello world" 来 推断 是 string 类 型 。 


虽然 类 型 推断 是 一 个 很 实用 的 工具 ， 也 能 够 使 代码 简短 易 读 ,但 是 建议 要 明确 地 传递 类 型 
参数 ， 因 为 可 能 会 存在 比较 复杂 的 函数 ， 使 得 编译 器 未 能 正确 地 进行 类 型 推断 ， 从 而 导致 
错误 。 


前 面 提 到 ， 泛 型 函数 内 部 泛 型 参数 T 只 能 当 作 一 个 any 类 型 值 来 使 用 ， 并 不 能 调用 可 能 
存在 的 方法 或 属性 。 如 果 通 过 类 型 断言 ， 就 可 以 打破 这 个 限制 了 。 代 码 8-6 给 出 在 泛 型 函数 中 
使 用 类 型 断言 的 示例 。 
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【代码 8-6】 泛 型 函数 中 使 用 类 型 断言 的 示例 代码 : ts006.ts 


01 function echo<T> (msg: T) : T{ 


02 if (typeof msg === "string") { 

03 console.log((<string><unknown>msg) .length); 
04 } 

05 else if (typeof msg === "number") { 

06 console.1log( (<number><unknown>msg) .toFixed (2)); 
07 . 

08 else { 

09 console.log (typeof msg); 

10 } 

11 return msg; 

4 } 

3 echo ("222"); Ww/3 

14 echo (222); /7 222.00 


在 代码 8-6 中 ，02 行 用 typeof 判断 参数 msg 的 类 型 是 否 为 string: 如 果 是 ， 就 用 类 型 断 
言 (<string><unknown>msg) 将 其 转 为 字符 串 类 型 ， 并 调用 length 属性 ;如 果 不 是 字符 串 类 型 ， 
05 行 判 断 是 否 为 数值 类 型 ， 如 果 是 数值 类 型 ， 就 用 类 型 断言 (<number><unknown>msg) 将 其 转 
为 数值 类 型 ， 并 调用 toFixed 方法 。 


坊 (<string><unknown>msg) 也 可 以 写成 (<string>msg)。 | 


假设 现在 有 一 个 学 生 管理 信息 系统 ， 其 中 需要 对 学 生 和 老师 对 象 进行 数据 处 理 〈 增 、 删 、 
改 、 查 ) 。 如 果 没 有 泛 型 ， 那 么 需要 写 两 个 数据 处 理 的 类 来 分 别 对 学 生 实体 和 老师 实体 进行 处 
理 。 借 助 泛 型 ， 可 以 用 一 个 通用 的 数据 处 理 方法 对 不 同 的 实体 进行 数据 处 理 。 


号 .4 详解 泛 型 类 


泛 型 类 必须 使 用 < > 括 起 泛 型 类 型 参数 T， 跟 在 类 名 后 面 。 类 是 面向 对 象 编程 中 一 个 非常 
重要 的 概念 。 类 是 现实 问题 的 抽象 ， 包 含 现实 事物 的 主要 属性 和 行为 。 

假设 现在 有 一 个 简单 的 学 生 管理 信息 系统 需要 开发 , 通过 做 需求 分 析 , 我 们 梳理 出 这 个 系 
统 主要 有 几 个 实体 : 学 生 、 老 师 和 课程 。 通 过 分 析 ， 我 们 明确 了 学 生 、 老 师 和 课程 这 几 个 实体 
的 属性 ， 并 将 其 转 成 类 〈 这 里 只 是 演示 ， 并 不 是 要 罗列 所 有 的 属性 和 方法 ) 。 

学 生 实体 有 学 号 (XH， 字 符 型 ) 、 姓 名 (name， 字 符 型 ) 和 班级 名 称 〈clazz， 字 符 型 ) ， 
学 生 类 可 用 代码 8-7 来 表示 。 
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【代码 8-7】 学 生 类 的 示例 代码 : ts007 ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 


class Student{ 
XH: string; 
name: string; 
Clazz: Strings 
constructor (XH:string,name:string,clazz:string) { 
this.XH = XH; 
this.name = name; 


this.clazz = clazz; 


} 


在 代码 8-7 中 ， 学 号 XH、 姓 名 name 和 班级 clazz 都 是 string 类 型 ， 类 中 用 constructor 创 
建 了 构造 方法 ， 可 以 用 来 初始 化 属性 值 。 

老师 实体 有 工 号 (GH， 字 符 型 ) 和 姓名 Cname， 字 符 型 ) ， 老 师 类 可 用 代码 8-8 来 表示 。 
【代码 8-8】 老师 类 的 示例 代码 : ts008.ts 


01 
02 
03 
04 
05 
06 
07 
08 


class Teacher{ 
GH: string; 
name: string; 
constructor (GH:string,name:string) { 
this.GH = GH; 


this.name = name; 


1 


在 代码 8-8 中 ， 工 号 GH 和 姓名 name 都 是 string 类 型 ， 类 中 用 constructor 创建 了 构造 方 
法 ， 可 以 用 来 初始 化 属性 值 。 

当前 还 有 其 他 类 ， 这 里 不 再 罗列 。 

作为 一 个 管理 系统 ,必须 对 学 生 和 老师 相关 数据 进行 处 理 ， 一 般 来 说 就 是 增 、 删 、 改 、 查 。 
如 果 没 有 泛 型 , 那么 需要 写 多 个 非常 类 似 的 数据 处 理 类 , 分别 对 学 生 类 实例 和 老师 类 实例 进行 


处 理 。 


基于 泛 型 类 和 泛 型 接口 ， 可 以 构建 一 个 通用 的 后 台数 据 操作 类 GenericDAO 。 该 类 是 泛 型 
类 ， 有 具体 如 代码 8-9 所 示 。 


【代码 8-9】 数据 操作 泛 型 类 示例 代码 : ts009.ts 


01 
02 
03 
04 
05 
06 
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interface IGeneric<T> { 
arg: T7 
save (arg: T): boolean; 

} 

Class GenericDAO<T> implements IGeneric<T>{ 
BGS T» 


save (arg: T): boolean { 

let ret = false; 

try { 
console.log("save to db"); 
//save (arg) 
ret = true; 

. 

catch (e) { 
console.log(e); 
ret = false; 

} 

finally { 


return ret; 


在 代码 8-9 中 ，01~04 行 定义 了 一 个 泛 型 接口 IGeneric<T>， 在 里 面 定义 了 一 个 类 型 为 了 
的 属性 arg 和 一 个 形 参 类 型 为 返回 布尔 类 型 的 方法 save。 
05 行 定义 了 一 个 泛 型 类 GenericDAO<T>， 它 实现 了 接口 IGeneric<T> 。 泛 型 类 
GenericDAO<T> 中 的 save 方法 有 一 个 类 型 为 T 的 参数 arg， 在 方法 体 中 将 T 保存 到 数据 库 中 ， 
并 返回 布尔 值 。 
泛 型 类 GenericDAO<T> 作 为 通用 的 数据 库 操 作 类 ， 可 以 用 来 对 学 生 和 老师 等 不 同 的 数据 
进行 操作 。 代 码 8-10 给 出 示例 代码 。 


【代码 8-10】 泛 型 类 调用 示例 代码 : ts010.ts 


01 
02 
03 
04 
05 
06 
07 
08 


let student = new Student ("0906"，"Uack"， "高 三 一 班 ") 
let teacher = new Teacher ("T1008"， "Smith") 

let geDao = new GenericDAO<Student>(); 

let ret = geDao.save (student) 

console.log(ret); 

let geDao2 = new GenericDAO<Teacher>(); 

ret = geDao2.save (teacher) 

console.1log(ret) 7 


类 有 静态 部 分 和 实例 部 分 。 泛 型 类 指 的 是 实例 部 分 的 类 型 ， ne | 


个 泛 型 类 型 。 
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泛 型 参数 T 类 似 于 any 类 型 ， 可 以 表示 任意 值 。 但 是 有 些 情况 下 ， 函 数 需要 处 理 的 数据 
有 一 定 的 约束 ， 比 如 有 一 个 泛 型 函数 需要 访问 泛 型 参数 T 的 length 属性 ， 并 加 1。 基 于 这 种 需 
求 ， 必 须 对 泛 型 参数 T 进 行 约束 ， 也 就 是 泛 型 约束 。 

泛 型 约束 语法 为 : 

T extends 接口 或 者 类 

为 了 直观 地 理解 泛 型 约束 的 相关 内 涵 ， 首 先 定义 一 个 接口 来 明确 约束 条 件 。 代 码 8-11 给 
出 一 个 用 于 约束 泛 型 的 接口 IGeneric， 其 中 有 一 个 属性 length。 


01 interface IGenerict{ 
02 length: number; 
03 } 


创建 一 个 泛 型 类 GenericAdd， 此 泛 型 类 的 T 需要 继承 〈extends) 这 个 接口 以 实现 泛 型 约 
束 ， 如 代码 8-12 所 示 。 


【代码 8-12】 泛 型 约束 类 示例 代码 : ts012.ts 


01 class GenericAdd<T extends IGeneric> { 


02 arg: T; 

03 add(arg: T): boolean { 

04 this.arg = arg; 

05 arg.length++; 

06 return true; 

07 } 

08 getLength() { 

09 return this.arg.length; 
10 } 

Ee } 


在 代码 8-12 中 ，01 行 用 <T extends IGeneric> 创 建 了 一 个 带 有 约束 的 泛 型 类 。 泛 型 类 型 T 
必须 有 一 个 length 属性 ， 否 则 无 法 作为 泛 型 类 GenericAdd 的 参数 ， 如 代码 8-13 所 示 。 


【代码 8-13】 泛 型 约束 类 示例 代码 : ts013.ts 


01 class ObjLent{ 


02 length =2; 
03 name = "obj"; 
04 } 


05 let obj = new ObjLen(); 
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06 let geDao = new GenericAdd<ObjLen>() .add (obj); VVOK 
07 let geDao2 = new GenericAdd<string>().add("hello"); VVOK 
08  //let geDao3 = new GenericAdd<number>(); // 报 错 ， 没 有 name 属性 


在 代码 8-13 中 ， 定 义 了 一 个 类 ObjLen， 其 中 有 一 个 length 属性 和 一 个 name 属性 。05 行 
用 new ObjLen() 构 建 了 一 个 此 类 的 实例 obj。06 行将 类 ObjLen 作为 类型， 实例 obj 作为 add 
参数 进行 调用 。07 行 用 string 作为 类 型 ，"hello" 作 为 add 参数 。06 行 和 07 行 都 可 以 正常 运 
行 ， 因 为 都 符合 接口 的 约束 。08 行 传 入 number 作为 类 型 T， 报 错 。 

除了 用 接口 作为 泛 型 约束 外 ， 还 可 以 用 一 个 类 型 参数 来 约束 另 一 个 类 型 参数 。 比如 ， 现 
在 想 要 用 属性 名 从 对 象 obj 中 获取 属性 ， 并 且 要 确保 这 个 属性 存在 于 对 象 obj 中 , 那么 需要 在 
这 两 个 类 型 参数 之 间 使 用 约束 ， 如 代码 8-14 所 示 。 


【代码 8-14】 泛 型 约束 之 间 约 束 示例 代码 : ts014.ts 


01 // 索 引 类 型 (Index types) 
02 function getProperty<T,K extends keyof T>(obj: T, key: K) { 


03 return obj[key]; 

04 } 

05 Lot Nob = | a ly Do er Sr dy 0 

06 let x = getProperty (obj, "a"); We 
07 let m =getProperty (obj, "m"); // 错误 


在 代码 8-14 中 ，02 行 通 过 泛 型 和 索引 类 型 定义 一 个 泛 型 函数 ， 索 引 类 型 属于 TypeScript 
中 的 高 级 类 型 。 这 里 keyof T 是 索引 类 型 查询 操作 符 。 对 于 任何 类 型 T，keyof T 的 结果 为 了 
上 已 知 的 公共 属性 名 的 联合 。K extends keyofT 约 束 了 K 是 工 的 公共 属性 ， 因 此 07 行 访问 m 
属性 时 报错 。 


8.6 4 千 


本 章 首 先 对 泛 型 的 概念 以 及 泛 型 的 优势 做 了 一 个 简单 的 说 明 。 泛 型 是 类 型 的 参数 化 , 是 类 
型 安全 且 性 能 高 的 一 种 技术 , 泛 型 可 以 支持 泛 型 函数 、 泛 型 接口 和 泛 型 类 。 其中, 泛 型 还 可 以 
进行 约束 ， 从 而 更 有 针对 性 地 对 类 型 参数 进行 操作 。 
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所 7 旦 
TypeSscript 声 明文 件 与 项 目 配 置 


前 面 用 8 章 的 篇 幅 对 TypeScript 语言 的 基本 语法 、 流 程控 制 语句 、 数 组 和 元 组 、 函 数 、 常 
用 工具 以 及 面向 对 象 等 进行 了 系统 的 介绍 ,将 这 些 知识 点 进行 组 合 , 就 可 以 构建 各 种 强大 的 应 
用 程序 。 

在 实战 中 , 我 们 还 必须 解决 一 些 问题 , 比如 用 TypeScript 编写 的 库 编 译 为 JavaScript 库 时 ， 
如 何 供 别 人 在 TypeScript 环境 中 使 用 ， 且 能 进行 静态 类 型 检测 和 代码 智能 提示 。 还 有 在 编写 
TypeScript 程序 时 ， 如 何 利用 目前 已 有 的 大 量 JavaScript 库 来 提高 编程 的 效率 。 

现实 中 的 项 目 , 一 般 都 是 比较 复杂 的 , 文件 分 布 在 不 同 的 文件 夹 中 ,必须 对 项 目 进行 适度 
的 配置 来 提高 代码 的 可 维护 性 和 可 读 性 。 如 果 一 个 项 目 非常 大 , 最 好 将 一 个 大 项 目 拆 成 若干 小 
项 目 ， 从 而 降低 单个 项 目的 复杂 度 。 

本 章 重点 对 TypeScript 中 的 声明 文件 和 项 目 配置 进行 曾 述 , 从 而 解决 类 似 TypeScript 文件 
如 何 引 入 jquery 库 的 问题 ， 同 时 对 项 目的 基本 配置 选项 以 及 项 目的 相互 引用 进行 介绍 。 通 过 
本 章 的 学 习 , 可 以 让 读者 对 TypeScript 中 的 声明 文件 和 项 目 配置 有 一 个 更 加 深刻 的 认识 , 为 下 

- 章 的 实战 项 目 演练 打下 基础 。 
本 章 主 要 涉及 的 知识 点 有 : 


@ 上 声明 文件 
@ 项 目 配置 
@ 项 目 引 用 
@ 三 针线 指令 


声明 文件 


TypeScript 作为 JavaScript 的 超 集 ， 在 开发 过 程 中 不 可 避免 要 引用 第 三 方 的 JavaScript 库 。 
我 们 希望 引入 的 第 三 方 JavaScript 库 可 以 像 TypeScript 一 样 ， 能 进行 静态 类 型 检测 和 代码 智能 
提示 。 

为 了 解决 这 个 问题 ， 我 们 需要 将 这 些 JavaScript 库 中 的 函数 和 方法 体 进行 移 除 ， 只 保留 需 
要 对 外 导出 的 类 型 声明 即 可 。 这 个 类 型 声明 就 是 声明 文件 ， 扩 展 名 是 dts。 声 明文 件 可 以 描述 
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JavaScript 库 的 模块 信息 。 通 过 引用 这 个 声明 文件 ， 可 以 利用 TypeScript 的 静态 类 型 检查 来 为 
我 们 调用 这 些 库 服务 。 

一 般 来 讲 ， 根 据 当 前 库 的 使 用 方式 不 同 ， 声 明文 件 的 编写 方式 也 是 不 同 的 。 在 官网 
https://www.tslang.cn/docs/handbook/declaration-files/templates.html 上 给 出 了 多 种 常见 类 型 库 的 
声明 文件 模板 以 供 读者 参考 : 


® global-modifying-module.d.ts 
global-plugin.d.ts 

global.d.ts 

module-class.d.ts 
module-function.d.ts 
module-plugin.d.ts 


module.d.ts 


具体 模板 内 容 这 里 不 再 阐述 ， 感 兴趣 的 读者 可 以 自行 去 官网 学 习 。 在 JavaScript 中 一 个 库 
有 很 多 使 用 方式 ， 这 就 需要 你 编写 合适 的 声明 文件 去 匹配 库 的 使 用 方式 。 这 里 限于 篇 幅 ， 只 介 
绍 全 局 库 和 CommonJS 库 的 声明 文件 编写 方法 。 


9.1.1 全 局 库 


全 局 库 是 指 能 在 顶层 全 局 对 象 window 下 访问 的 库 ， 比 如 jquery 库 中 $ 符 号 就 是 一 个 全 局 
变量 。 无 须 导入 任何 模块 , 就 可 以 用 全 局 变量 $ 来 使 用 jquery 库 中 的 方法 。 全 局 库 需 要 在 HTML 
中 用 script 标签 进行 引用 。 全 局 库 的 代码 通常 都 十 分 简单 。 代 码 9-1 给 出 一 个 简单 的 全 局 库 
jTools.js。 

【代码 9-1】 全 局 库 jToolsjs 代码 示例 : jTools.js 


01 (function(jTools) { 


02 jTools.version = "1.0.0"; 

03 jTools.author = "jackwang"; 

04 function toString(obj) { 

05 return JSON.stringify (obj); 

06 } 

07 function $(id) { 

08 return document .getElementById(id) 
09 a 

10 jTools.toString = toString; 

Ee jTools.$ = $; 

2 }) (jTools = window.jTools || (window.jTools = {})); 


假设 需要 在 TypeScript 文件 中 调用 jToolsjs 中 的 方法 , 那么 该 如 何 编写 声明 文件 呢 ? 首先 
声明 文件 扩展 名 必须 是 d.ts， 因 此 这 里 可 以 将 声明 文件 命名 为 jTools.d.ts。 在 代码 9-1 中 ,可 以 
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分 析出 jTools 对 象 是 挂 载 在 window 下 的 ,因此 在 浏览 器 环境 中 可 以 直接 进行 访问 。jTools 对 
象 中 有 一 个 version 和 author 属性 ， 且 有 两 个 方法 toString 和 $ 。 


虽然 tsc 编译 器 可 以 根据 :ts 文件 自动 产生 声明 文件 ， 但 是 往往 效果 不 好 ， 不 能 准确 描述 信 
息 。 因 此 ， 一 般 都 要 手动 进行 编写 或 用 其 他 工具 进行 赋值 生成 后 调整 。 


声明 文件 中 的 类 型 用 declare 关键 字 来 声明 ， 例 如 全 局 变量 jTool， 就 可 以 用 declare 
namespace jTools 来 声明 类 型 另外 , 在 声明 文件 中 , 想 让 jTooljs 中 的 属性 version 和 author 不 
被 修改 ， 可 以 用 const 进行 限定 。 

全 局 库 中 的 属性 和 方法 可 以 直接 在 命名 空间 声明 jTools 下 定义 ， 只 需要 给 出 签名 即 可 ， 
不 要 包含 具体 实现 ， 这 个 和 接口 类 似 。 代 码 9-2 给 出 全 局 库 jTools.js 的 声明 文件 。 


【代码 9-2】 jTools.d.ts 代码 示例 : jTools.d.ts 


01 ae 

02 * 全 局 库 jTools.js 

03 wd 

04 declare namespace jTools { 

05 const version: string; 

06 const author: string; 

07 function toString (obj:any) :string; 
08 a 

09 * 根据 ID 获取 DOM 元 素 

10 * @param id DomID 注意 不 带 # 
Ee Eh 

he function $ (id:string) :any7 
13 } 


声明 文件 会 被 编译 器 解析 并 识别 , 如 果 想 在 智能 提示 的 时 候 给 出 关于 库 和 库 中 方法 的 API 
说 明 , 就 可 以 在 声明 文件 中 加 入 文档 注释 。 当 在 TypeScript 编写 代码 的 时 候 ， 这 些 声明 文件 就 
能 很 好 地 给 我 们 进行 静态 类 型 检查 和 API 说 明 ， 如 图 9.1 所 示 。 


glo 
1 

2 let configs = {url:"/post",data:"ids2",callback:()=>{)); 
3 let str = jfools.tostring(configs); 

4 jTools.$("mydiv").innerHTHL = str; 
5 
6 
了 


console.log(str); 
jTools. 
加 $ function jTools.S(id: string): any 
目 author 
Btostring 根据 ID 获 取 DOM 元 素 
四 version 
@param id 一 DomlD 注 意 不 带 # 


9.1 jTools.d.ts 声明 文件 智能 提示 界面 


如 果 不 给 出 jTool 的 声明 文件 ， 而 直接 调用 jTool 中 的 方法 ， 编 译 器 会 提示 无 法 找到 jTool 
对 象 的 错误 。 
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| 在 书写 全 局 库 声明 文件 时 , 虽然 允许 在 全 局 作用 域 里 定义 多 个 类 型 ， 但 是 为 了 防止 命名 冲 
| 突 , 不 建议 直接 在 全 局 作用 域 中 定义 类 型 ,而 是 使 用 库 定义 的 全 局 变量 名 来 声明 命名 空间 
类 型 。 


为 了 验证 声明 文件 是 否 可 以 正常 工作 ， 新 建 了 一 个 globalcall.ts 文件 来 调用 jTools 中 的 方 
法 。globalcall.ts 文件 如 代码 9-3 所 示 。 


【代码 9-3】 globalcall.ts 代码 示例 : globalcall.ts 


01 let configs = {url:"/post",data:"id=2"}; 
02 let str = jTools.toString(configs); 
03 jTools.$ ("mydiv") .innerHTML = str; 


04 console.log(str); 


从 代码 9-3 可 以 看 出 ,我 们 并 未 通过 import 关键 字 导入 相关 模块 ， 可 以 直接 使 用 jTool 库 
中 的 方法 。 然 后 可 以 先 用 tsc 命令 将 globalcall.ts 文件 编译 为 globalcalljs 备用 。 

全 局 库 发 布 到 浏览 器 中 ， 需 要 新 建 一 个 index.html 文件 ， 在 其 中 通过 script 标签 先 引入 全 
局 库 jTooljs， 然 后 引入 globalcalljs 文件 。 代 码 9-4 给 出 调用 全 局 库 的 HTML 文件 内 容 。 


【代码 9-4】 index.html 代码 示例 : index.html 


01 <!DOCTYPE html> 
02 <html lang="en"> 


03 <head> 

04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>global</title> 

08 </head> 

09 <body> 

10 <div id="mydiv"></div> 

i <script src="../mydefs/jTools.js"></script> 

12 <script src="globalcall.js"></script> 


bi </body> 
14 </html> 


直接 通过 浏览 器 打开 index.html， 会 显示 如 下 内 容 ， 如 图 9.2 所 示 。 
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- 0 x 
D global x + 


CGC 文件 | CV/Src/co9/disyin .图 廊 日 


{"url":"/post","data":"id=2"} 


9.2 index.html 运行 界面 


9.1.2 ”模块 化 库 
这 里 以 CommonJS 为 例 ，CommonJS 是 Node 采用 的 模块 加 载 机 制 。 现 在 有 一 个 jYdjs 库 ， 是 
用 CommonJS 规范 编写 的 ，jYd 对 象 用 exports 导出 。 代 码 9-5 给 出 jYdjs 的 库 文件 代码 。 
【代码 9-5】 jYd.js 的 库 文件 代码 示例 : jYd.js 
01 "use strict"; 
02 Object.defineProperty (exports, "_ esModule", { value: true }); 


03 var jYd; 
04 (function (jYd) { 


05 var ajax; 

06 (function (ajax) { 

07 function post(data) { 

08 console.log("post data..."); 

09 console.1log(JSON.stringify (data)); 

10 if (typeof data.callback === "function") { 
1 data.callback({ code: 1, msg: "", data: {} }); 
12 . 

13 return "ok"; 

14 } 

5 ajax.post = post; 

16 function get(data) { 

Eh console.log("get data..."); 

18 console.1log(JSON.stringify (data)); 

19 if (typeof data.callback === "function") { 
20 data.callback({ code: 1, msg: "", data: {} }); 
区 起 上 

pep return "ok"; 

23 和 

24 ajax.get = get; 

Ee }) (ajax = jYd.ajax || (jYd.ajax = {})); 

26 Var dom; 

2 (function (dom) { 
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28 function getById(ele) { 

交 色 return document .getElementById (ele) 
30 

SS dom.getById = getById; 

32 }) (dom = jYd.dom || (jYd.dom = {})); 


33 }) (jYd = exports.jYd || (exports.jYd = {})); 


jYdjs 库 中 模拟 了 “命名 空间 ”的 用 法 ， 其 中 jYd.dom 和 jYd.ajax 对 象 下 分 别 定 义 了 一 些 
方法 。 为 了 在 TypeScript 文件 中 能 够 使 用 jYdjs 库 ， 需 要 定义 一 个 jYd.dits 的 声明 文件 。 代 码 
9-6 给 出 jYd.js 的 声明 文件 内 容 。 


【代码 9-6】 jYd.dits 声明 文件 代码 示例 : jYd.d.ts 


01 We 

02 * jYd 自 定义 函数 

03 a 

04 export declare namespace jYd{ 

05 interface IAjaxDataf{ 

06 url:string; 

07 data:string; 

08 callback: (e:any)=>any7 

09 } 

10 A 

11 * ajax 工具 

2 

13 namespace ajax{ 

14 a 

15 * 发 送 ajax post 请 求 

16 * @param data post 数据 

al x 

18 function post (data:IAjaxData) :string; 
19 We 

20 * 发 送 ajax get 请 求 

2 * @param data get 数据 

2 

2 function get (data:IAjaxData) :string; 
24 } 

namespace dom{ 

26 function getById(ele:string) :any 
2 } 

28 上 


在 代码 9-6 中 ，declare namespace jYd 之 前 用 了 一 个 关键 字 export， 这 个 关键 字 表 示 该 库 
是 一 个 模块 化 库 。 因 此 使 用 的 时 候 需 要 用 import 进行 导入 。 将 js 库 文 件 和 声明 文件 名 保持 一 
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致 是 非常 重要 的 , 在 .ts 文件 中 import 的 文件 实际 上 是 声明 文件 , 到 了 运行 时 却 要 调用 .js 文件 ， 
如 果 名 字 不 同 ， 那 么 运行 时 会 找 不 到 对 应 的 模块 文件 。 新 建 一 个 main.ts 来 调用 jYdjs 库 中 的 
方法 。 代 码 9-7 给 出 main.ts 文件 的 内 容 。 

【代码 9-7】 mainits 文件 的 内 容 代码 : maints 


01 import { jYd } from "../mydefs/jYd"; 

02 let data :jYd.IAjaxData = {url:"/get",data:"a=2&b=2",callback:function(e) 
{console.log(e)}}; 

03 jYd.ajax.post (data); 


在 代码 9-7 中 ， 用 import { jYd } from "../mydefs/iYd" 导入 模块 。 注 意 ， 在 编译 阶段 ， 
"mydefsiYd" 实 际 上 是 "mydefsyiYd.dts"， 到 运行 阶段 ，"JmydefsiYd" 实 际 上 表示 的 是 
"../mydefs/jYd.js”。 当 在 main.ts 中 进行 编码 的 时 候 ， 我 们 可 以 看 出 声明 文件 能 够 正常 工作 ， 
能 给 出 jYd 库 中 定义 的 方法 提示 ， 如 图 9.3 所 示 。 


Ts maints ® 0 


1 import { jYd } from "../mydefs/jYd"; 
2 


let data :jYd.IAjaxData = {url:"/get",data:"a=28b=2",callback:function(e){console.10g(e))}}; 
jYd.ajax.post(data); 
jvd.ajax, 
function jyd.ajax.get(data: jyd.IAjaxD * 
ata): string 


发 送 ajax get 请 冰 


@porom data 一 get 数 所 
图 9.3 模块 库 jYd.d.ts 声明 文件 智能 提示 界面 


由 于 CommonJS 规范 的 库 文 件 可 以 被 NodeJS 直接 运行 , 这 里 将 tsconfig.json 文件 中 的 tsc 
编译 器 选项 中 的 "module" 设 置 为 "commonjs"。 代 码 9-8 给 出 tsconfig.json 文件 的 内 容 。 关 于 
tsconfig.json 中 各 配置 的 作用 ， 将 在 项 目 配置 一 节 详 细 说 明 。 


【代码 9-8】 tsconfig.json 文件 的 内 容 : tsconfigjson 


01 站 

02 "compilerOptions": { 

03 "module": "commonjs", 
04 "traceResolution": true, 
05 "moduleResolution": "node", 
06 "target": "es5"， 

07 "noImplicitAny": false, 
08 "sourceMap": true, 

09 outDir a "dlstens 

10 PoOoCtDIr .MSE 

ll "declaration": false, 

用 之 "removeComments": 七 rue 
Ek } 

14 } 
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为 了 更 加 方便 地 运行 代码 ， 在 package.json 文件 中 定义 一 个 启动 配置 。 代 码 9-9 给 出 
package.json 文件 的 内 容 。 


【代码 9-9】 packagejson 文件 的 内 容 : packagejson 


01 { 

02 seraionns VO.0" 

03 "configurations": [ 

04 外 

05 "type": "node", 

06 "request": "launch", 

07 "name": "Launch Program", 

08 "program": "${workspaceFolder}\\dist\\main.js", 
09 "preLaunchTask": "tsc: build - tsconfig.json", 
10 } 

el | 

a } 


至 此 ， 就 可 以 在 Visual Studio Code 调试 面板 中 进行 调试 运行 了 ， 运 行 结果 如 图 9.4 所 示 。 


Launch global 


ram Files\no brk=25897 


C:\Progr es\n x c 2 dist\main.is 
Debugger listening on ws;//127.9.6.1;25897/58718ee3-7a66-4ce8-abd7-3972894119da 


post data... 
{"url":"/get", "data":"as28b=2"} 


» Object {code: 1, msg: "", data: Object} 


图 9.4 ”模块 库 jYdjs 在 NodeJS 环境 中 的 运行 界面 


我 们 大 致 了 解 了 声明 文件 是 如 何 定义 以 及 如 何 工 作 的 , 也 许 有 人 会 有 疑问 , 定义 声明 文件 
感觉 比较 麻烦 ， 例 如 想 用 第 三 方 库 ( 如 jQuery) ， 里 面 有 成 千 上 万 行 的 代码 ， 自 己 编写 声明 
文件 会 非常 吃力 。 

其 实 ， 常 用 库 的 声明 文件 在 社区 早 就 有 人 维护 好 了 , 我 们 只 需要 引入 即 可 。 下 面 介绍 如 何 
在 TypeScript 中 引入 jquery 库 。 

在 TypeScript 2.0 以 后 ， 获 取 、 使 用 和 查找 声明 文件 变 得 十 分 容易 。 我 们 只 需要 简单 的 几 
步 即 可 完成 相关 库 声明 文件 的 导入 工作 。 

当前 使 用 的 TypeScript 版 本 是 3.3, 获取 类 型 声明 文件 只 需要 使 用 npm 命名 直接 安装 即 可 。 
获取 jquery 库 的 声明 文件 命令 为 : 


npm install --save @types/jquery 


大 多 数 情 况 下 ， 类 型 声明 包 的 名 字 总 是 与 它们 在 npm 上 的 包 的 名 字 相 同 ,但 是 有 @types/ 
前 级 ， 例 如 lodash 库 的 类 型 为 @types/lodash。 当 成 功 安装 jquery 库 时 ， 我 们 在 项 目 目录 下 会 
找到 如 图 9.5 所 示 的 目录 结构 。 
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4 node modules 
4 @types 
4 jquery 
» dist 
TS indexd.ts 
TS JQueryStatic.d.ts 
TS legacy.dts 
NR LICENSE 
TS miscdits 
{} packagejson 
©® READMEmd 
» sizzle 


9.5 npm 安装 @types/jquery 声明 文件 后 的 目录 界面 


下 载 完成 后 , 就 可 以 直接 在 TypeScript 文件 里 使 用 jquery 库 。 不论 是 在 模块 里 还 是 全 局 代 
码 里 都 可 以 调用 。 新 建 一 个 jquerycall.ts 文件 ， 然 后 就 可 以 在 里 面 调用 jquery 库 相 关 API 了 ， 
如 图 9.6 所 示 。 


Ts jquerycallts ® .| 
1 jeouery. 引 jl 

Du ajax (method) JQueryStatic.ajax(url: strin * 

图 ajaxprefilter 8, settings?: JQuery<TElement = HTHLEL 

@ ajaxsettings ementy>.AjaxSettings<any>); JQuery<TEle 

@ ajaxsetup ment = HTMLElement>.jqXHR<any> (+1 ove 

® ajaxTransport rload) 

® parse]SoN 

Bisplainobject Perform an asynchronous HTTP (Ajax) request. 
@poram url 一 Astring containing the URL to 
which the request is sent 
Q@porom settings 


图 9.6 jquery 声明 文件 智能 提示 界面 
新 建 一 个 jquerycall.ts 文件 , 主要 功能 是 将 一 个 文本 值 显示 到 DOM ID 为 mydiv 的 元 素 上 。 
代码 9-10 给 出 jquerycallts 文件 的 内 容 。 
【代码 9-10】 jquerycall.ts 文件 的 内 容 : jquerycall.ts 


01 let msg: string = "hello world!"; 
02 $("#mydiv") .html (msg); 


将 jquerycallts 文件 编译 成 jquerycalljs, 然后 新 建 一 个 index2.html, 用 来 运行 jquerycalljs， 
由 于 jQuery 是 一 个 全 局 库 ， 因 此 首先 需要 在 html 里 面 引入 jQuery.js 文件 ， 然 后 引入 
jquerycall.js。index2.html 的 内 容 如 代码 9-11 所 示 。 


【代码 9-11】 index2.html 文件 的 内 容 : index2.html 


01 <!DOCTYPE html> 
02 <html lang="en"> 
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03 <head> 

04 <meta charset="UTF-8"> 

05 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

06 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

07 <title>jquery</title> 

08 </head> 

09 <body> 

10 <div id="mydiv"></div> 

1 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"> 
</script> 

4 <script src="jquerycall.js"></script> 


13 </body> 
14 </html> 


在 浏览 器 中 运行 ， 结 果 如 图 9.7 所 示 。 


D jquery 
CGC g@ 文件 | G/Ssrqco9g/disyin 儿女 © : 


hello world! 


9.7 index2 运行 界面 


医改 也 可 以 将 自己 写 的 库 声明 文件 发 布 到 DefinitelyTyped， 这 样 就 可 以 让 他 人 使 用 。 | 


义 . 2 项 目 配置 


项 目 文件 一 般 都 存在 一 个 单独 的 目录 里 ，TypeScript 编译 器 命令 tsc 如 何在 不 带 任何 参数 
的 情况 下 ,会 在 执行 此 命令 所 在 的 目录 开始 查找 配置 文件 tsconfig.json， 如 果 找 到 就 用 此 配置 
文件 中 的 相关 配置 对 项 目 进行 解析 和 编译 。 

如 果 一 个 目录 中 存在 一 个 tsconfig.json 文件 ， 就 意味 着 这 个 目录 是 TypeScript 项 目的 根 目 
录 。tsconfig.json 文件 中 指定 了 用 来 编译 项 目的 编译 选项 和 文件 解析 等 配置 。 一 个 TypeScript 
项 目 通常 都 是 用 tsc 命令 解析 项 目 配置 文件 tsconfig.json 来 编译 的 。 

当 调 用 tsc 命令 而 不 带 任何 输入 文件 的 情况 下 ， 编 译 器 会 从 当前 目录 开始 去 查找 
tsconfig.json 文件 ， 如果 没 有 找到 就 会 逐 级 向 上 搜索 父 目 录 。 如 果 调 用 tsc 命令 并 指定 了 输入 文 
件 时 ，tsconfigjson 文件 会 被 忽略 。 

关于 tsconfig.json 的 完整 配置 描述 信息 ， 可 以 参考 http://json.schemastore.org/tsconfig 进行 
查看 。 代 码 9-12 给 出 一 个 tsconfig.json 配置 示例 。 
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【代码 9-12】 tsconfigjson 项 目 配置 示例 代码 : tsconfig.json 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
本 
2 
3 
14 
15 
16 
En 
18 
19 
20 
2 
22 
23 
24 
25, 


代码 9-12 


{ 


"compilerOptions": { 
"module": "commonjs", 
"noImplicitAny": true, 
"removeComments": true, 
"sourceMap": true 

}， 

二 

"include": [ 

Wsrc/**/*™ 

]， 

"exclude": [ 
"node modules" 

], 

"references": [{ 

"path": "../common" 

Mr 


"compileOnSave":false, 


"extends":"./config/base.json", 


"typeAcquisition":{ 
"enable":false, 
"include":[], 


"exclude": []， 


只 是 一 个 示例 , 在 tsconfig.json 项 目 配 置 中 , 顶级 属性 有 compilerOptions、files、 
include、 exclude、 references、 compileOnSave、extends 和 typeAcquisition。 其 中 , compilerOptions 
是 编译 器 的 编译 选项 ， 其 中 涉及 大 量 的 配置 子 项 目 。 如 果 compilerOptions 不 提供 任何 配置 ， 
那么 编译 器 会 使 用 编译 配置 项 的 默认 值 。 常 用 的 compilerOptions 可 以 参考 编译 器 选项 列表 ， 
如 表 9.1 所 示 。 


表 9.1 常用 tsc 编译 器 选项 


选项 类 型 认 值 述 

|-allowJs oolean false 允许 编译 JavaScript 文件 

上 -allowUnreachableCode oolean alse 不 报告 执行 不 到 的 代码 错误 
[--allowUnusedLabels oolean alse 不 报告 未 使 用 的 标签 错误 

上 -alwaysStrict oolean [false 以 严格 模式 解析 并 为 源 文件 生成 "use strict" 
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|--moduleResolution 


上-noEmitOnError 

上 -noErrorTruncation 
上-noFallthroughCasesInSwitch 
上 -noImplicitAn: 


上 -noImplicitReturns 
| 上 -noImplicitThis 


[上 -noImplicitUseStrict 


( 续 表 ) 
| 选项 类 型 默认 值 ”描述 
es ng J 解 析 非 相对 模块 名 的 基准 目录 。 查 看 模块 解析 文 
档 了 解 详 情 
上 -checkds boolean false 在 :js 文件 中 报告 错误 ， 与 --allowJs 配合 使 用 
上 -declaration boolean false 生成 相应 的 .dits 文件 
-declarationDir string false 生成 声明 文件 的 输出 路 径 
-diagnostics boolean false 显示 诊断 信息 
|-emitDecoratorMetadata boolean false 对 装饰 器 声明 加 上 设计 类 型 元 数据 
[-experimentalDecorators boolean |false 启用 实验 性 的 ES 装饰 器 
[-extendedDiagnostics boolean false 显示 详细 的 诊断 信息 
|-init 初始 化 tsconfig.json 文件 
We = es6" 或 。 脂 定 生成 模块 系统 。 当 target 配置 为 es6 时 ,默认 
'commonjs"| 为 es6， 否 则 默认 为 commonjs 


lassic 或 决定 如 何 处 理 模块 。 当 module 选项 为 "amd"、 
ee "或 "es6" 时 默认 为 "classic"， 和 否则 默认 为 
node 


ee 
boolean ltalse | 不 截断 错误 消息 
报告 switch 语句 的 fallthrough 错误 
lalse | 符 表 达 式 和 声明 上 有 有 隐 合 的 any 类 型 时 报错 
booream itse | 二 是 函数 的 所 有 到 癌 路 径 都 有 返回 值 时 报错 
当 this 表达 式 的 值 为 any 类 型 的 时 候 ， 生 成 一 个 
错误 
boolean ltalse | 异 块 输出 中 不 包含 "use strict" 指 令 


i 1/ <reference> 或 模块 导入 的 文件 加 到 编译 
Doolean alse 文件 列表 


b false 


|--noResolve 

|-noStrictGenericChecks peck 

上 -noUnusedLocals boolean 车 有 未 使 用 的 局 部 变量 则 抛 错 

上 -noUnusedParameters 车 有 未 使 用 的 参数 则 抛 错 

上 outDir 重 定向 输出 目录 
输出 文件 合并 为 一 个 文件 。 合 并 的 顺序 是 根据 | 

|-outFile 入 编译 器 的 文件 顺序 和 /<reference> 以 及 
import 的 文件 顺序 决定 的 

上 -preserveConstEnums 保留 const 和 enum 声明 

编译 指定 目录 下 的 项 目 。 这 个 目录 应 该 包含 一 个 | 

[ect me sconfig.json 文件 来 管理 编译 

| 上 -removeComments boolean alse 删除 所 有 注释 ， 除 了 以 性 开头 的 版 权 信息 

上 -skipLibCheck boolean alse 忽略 所 有 声明 文件 〈 *.d.ts) 的 类 型 检查 

上 -sourceMap boolean alse 生成 相应 的 map 文件 
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( 续 表 ) 


| 选项 


指定 TypeScript 源 文件 的 路 径 ， 以 便 调 试 器 行 定位 
启用 所 有 严格 类 型 检查 选项 

禁用 函数 参数 双向 协 变 检查 

确保 类 的 非 undefined 属性 已 经 在 构造 函数 里 初始 化 。 
若 要 令 此 选项 生效 ， 需 要 同时 启用 --strictNullChecks 
在 严格 的 null 检查 模式 下 ， null 和 undefined 值 不 包 
含 在 任何 类 型 里 只 允许 用 它们 自己 和 any 来 赋值 (有 | 
个 例外 ，_ undefined 可 以 赋值 到 void) 

阻止 -noImplicitAny 对 缺少 索引 签名 的 索引 对 象 报错 


|-sourceRoot 


上 -strict 


上 -strictFunctionTypes 


|--strictPropertyInitialization 


-strictNullChecks 


|--suppressImplici 


志 信息 
要 包含 的 类 型 声明 文件 名 列表 


全 一 
tring[] | | 要 包含 的 类 型 声明 文件 路 径 列表 


编译 选项 之 间 有 的 是 有 依赖 关系 的 ， 例 如 仅 当 提 供 了 选项 --inlineSourceMap 或 选项 
--sourceMap 时 ， 才 能 使 用 选项 sourceRoot， 只 有 --module 配置 为 'amd' 和 'system' 时 才 支 持 用 
--outFile 配置 来 将 多 个 文件 输出 为 单个 文件 。 

files 属性 指定 一 个 包含 相对 或 绝对 路 径 的 文件 列表 。 include 和 exclude 属性 指定 一 个 文件 
glob 匹配 模式 列表 。 支 持 的 glob 通配符 有 : 


@@ *: 匹配 0 或 多 个 字符 (不 包括 目录 分 隔 符 ) 。 
@ ?: 匹配 一 个 任意 字符 (不 包括 目录 分 隔 符 ) 。 
@  *+/: 递归 匹配 任意 子 目 录 。 


如 果 一 个 glob 模式 里 的 某 部 分 只 包含 * 或 .*, 那么 仅 有 支持 的 文件 扩展 名 类 型 被 包含 在 内 ， 
比如 默认 的 .ts、.tsx 和 .dts， 如 果 allowjs 设置 为 true， 就 包含 js 和 .jsx。 

如 果 tsconfig.json 中 不 存在 files 或 include 属性 ， 则 编译 器 默认 包含 目录 和 子 目 录 中 的 所 
有 TypeScript 文件 〈,ts, .dts 和 .tsx) ， 但 exclude 指定 的 文件 除外 。 如 果 allowJs 选项 被 设置 
成 true， 那 么 JS 文件 (js 和 .jsx) 也 会 被 包含 进来 。 如 果 指 定 files 属性 ， 那 么 编译 器 只 包含 
files 配置 的 那些 文件 和 include 指定 的 文件 。 

exclude 属性 指定 要 从 编译 中 排除 的 文件 列表 。exclude 属性 只 影响 通过 include 属性 包含 
的 文件 , 而 不 影响 fles 属性 。 使 用 outDir 编译 选项 指定 的 目录 下 的 文件 永远 会 被 编译 器 排除 ， 
除非 你 明确 地 使 用 files 将 其 包含 进来 。 


| glob 匹配 模式 需要 TypeScript 2.0 版 及 以 上 版 本 。tsconfigjson 文件 可 以 是 一 个 空 文件 ， 那 
[ 么 所 有 默认 的 文件 都 会 以 默认 配置 选项 编译 。 
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如 果 没 有 特殊 指定 ，exclude 默认 情况 下 会 排除 node_modules、bower_components、 
jspm_packages 和 outDir 目录 。 

任何 被 files 或 include 指定 的 文件 所 引用 的 文件 也 会 被 包含 进来 。 例如 , A.ts 引用 了 B.ts， 
因此 B.ts 不 能 被 排除 ， 除 非 引 用 它 的 ALts 在 exclude 列表 中 。 

在 命令 行 上 tsc 如 果 指 定 了 编译 选项 , 那么 会 覆盖 在 tsconfig.json 文件 里 的 相应 配置 选项 。 
默认 情况 下 ， 所 有 可 见 的 @types 包 会 在 编译 阶段 被 项 目 自动 包含 进来 。 换 句 话说 ， 
node_modules/@types 文件 夹 下 以 及 子 文件 夹 下 的 所 有 @types 包 都 是 可 见 的 。 

另外 ， 项 目 配置 文件 tsconfig.json 可 以 利用 extends 属性 从 另 一 个 配置 文件 里 继承 配置 ， 
为 多 项 目 配置 提供 了 便利 。 

extends 属性 的 值 是 一 个 字符 串 ， 包 含 指向 另 一 个 要 继承 的 json 配置 文件 的 路 径 。 如 果 一 
个 tsconfigjson 文件 中 使 用 了 继承 配置 (继承 configs/base.json) ， 那 么 这 个 configs/base.json 
中 的 配置 会 先 被 加 载 ， 再 加 载 继承 文件 tsconfig.json 中 的 配置 ， 如 果 二 者 有 同属 性 的 配置 ， 那 
么 继承 文件 tsconfig.json 里 的 配置 会 覆盖 原 configs/base.json 文件 的 配置 。 如 果 发 现 配置 文件 
循环 引用 ， 则 会 报错 。 代 码 9-13 给 出 一 个 tsconfig.json 继承 configs/base.json 配置 的 示例 。 


【代码 9-13】 tsconfigjson 继承 配置 示例 代码 : tsconfigExtend.json 


01 //configs/base.json: 


02 { 

03 "compilerOptions": { 

04 "noImplicitAny": true, 
05 "strictNullChecks": true 
06 } 

07 } 

08 //tsconfig.json: 

09 { 

10 "extends": "./configs/base", 
i 

了 有 wmaimna 七 Sw7 

了 3 "supP1Lemental.tsn" 

14 ] 

1 |; 


在 代码 9-13 中 有 两 个 文件 ， 一 个 是 项 目的 tsconfig.json 配置 文件 ， 另 一 个 是 configs 目录 
下 的 base.json 配置 文件 。 第 10 行 用 "extends":"./configs/base" 语 句 实现 了 tsconfig.json 继承 
configs/base.json 配置 。 


配置 文件 里 的 相对 路 径 在 解析 时 相对 于 它 所 在 的 文件 ， 因 此 如 果 一 个 配置 文件 
tsconfig.json 继承 了 另 一 个 配置 文件 base.json， 那 么 被 继承 的 配置 文件 中 使 用 的 相对 路 径 
| 必须 小 心 ， 因 为 它 是 相对 basejson 文件 所 在 的 目录 ， 而 不 是 tsconfigjson。 
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日. 了 项 目 引 用 


项 目 引用 (project references) 是 TypeScript 3.0 版 本 中 新 引入 的 一 个 特征 ， 这 也 是 官方 给 
TypeScript 3.0 开发 的 最 重大 的 功能 之 一 。 在 项 目 实战 中 ， 一 个 项 目 可 能 非常 复杂 ， 我 们 需要 
对 项 目 代 码 进行 分 层 。 在 C# 中 ， 可 以 在 一 个 解决 方案 中 构建 很 多 项 目 ， 各 个 项 目 之 间 可 以 互 
相 引 用 ， 我 们 可 以 对 单个 项 目 进行 编辑 和 编译 。 

项 目 引 用 人 允许 TypeScript 项 目 依赖 于 其 他 TypeScript 项 目 ， 也 就 是 通过 tsconfig.json 文件 
引用 其 他 tsconfigjson 文件 。 指 定 这 些 项 目 依赖 项 可 以 更 容易 地 将 项 目 代码 拆 分 为 更 小 的 子 项 
目 ， 从 而 降低 复杂 度 。 

项 目 引 用 为 编译 器 提供 了 一 种 理解 构建 顺序 和 输出 结构 的 方法 。 这 意味 着 更 快 的 编译 速 
度 ， 并 支持 跨 项 目 导 航 、 编 辑 和 重 构 。 由 于 TypeScript 3.0 及 以 上 版 本 奠定 了 项 目 引 用 的 基础 
并 公开 项 目 引 用 的 API， 因 此 任何 构建 工具 都 能 够 实现 项 目 引 用 的 功能 。 

TypeScript 3.0 及 以 上 版 本 可 以 用 tsc 命名 的 新 构建 模式 ， 即 --build 参数 ， 它 与 项 目 引 用 协 
同 工 作 可 以 加 速 TypeScript 项 目的 构建 。 tsconfig.json 的 顶层 属性 references 是 一 个 数组 , 可 以 
用 来 指定 要 引用 的 项 目 。references 中 的 path 属性 可 以 指向 包含 tsconfig.json 文件 的 目录 ,或 
者 直接 指向 项 目 配置 文件 本 身 。 由 于 references 是 数组 ， 因 此 可 以 用 来 指定 多 个 项 目 引 用 。 

当 用 references 引用 一 个 项 目 时 ， 导 入 引用 项 目 中 的 模块 时 实际 加 载 的 是 模块 生成 的 声明 
文件 〈.dts) 。 如 果 引 用 的 项 目 生 成 一 个 outFile 文件 ， 那 么 这 个 输出 文件 对 应 的 声明 文件 对 
于 当前 项 目 是 可 见 的 。 

当 将 一 个 大 项 目 拆 分 成 多 个 子 项 目 后 , 会 显著 地 提升 类 型 检查 和 编译 的 速度 , 减少 编辑 器 
的 内 存 占用 ， 还 会 改善 程序 在 逻辑 上 进行 分 组 。 


, 引用 的 项 目 必须 启用 新 的 composite 设置 。 这 个 选项 用 于 帮助 TypeScript 快速 确定 引用 工 
[ 程 的 输出 文件 位 置 。 


车 启用 composite 编译 选项 ， 对 于 rootDir 配置 而 言 ， 如 果 没 有 明确 指定 ， 则 默认 为 包含 
tsconfig 文件 的 目录 。 所 有 的 实现 文件 必须 匹配 到 某 个 include 模式 或 在 files 数组 里 列 出 。 如 
果 违 反 了 这 个 限制 ，tsc 会 提示 有 些 文件 未 指定 。 启 用 composite 编译 选项 必须 同时 开启 
declaration 选项 ， 即 将 declaration 选项 设置 为 true。 

如 果 启 用 --declarationMap 编译 器 选项 ， 就 提供 对 declaration source maps 的 支持 (d.ts.map 
和 js.map) 。 在 某 些 编辑 器 (如 Visual Studio Code) 上 ， 可 以 使 用 诸如 跳 转 到 定义 、 重 命名 以 
及 跨 工 程 编 辑 文件 等 编辑 器 高 级 特性 。 

在 tsconfig.json 中 使 用 references 引用 其 他 项 目 时 ， 可 以 和 path 一 起 使 用 的 是 prepend 选 
项 ， 用 来 启用 前 置 某 个 依赖 的 输出 ， 如 下 所 示 。 


01 "references": [ { 
02 pathne w/common™s 
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03 "prepend": true 
04 | 


启用 prepend 选项 会 将 项 目的 输出 添加 到 当前 工程 的 输出 之 前 。 它 对 js 文件 和 .d.ts 文件 以 
及 source map 文件 同样 有 效 。 但 是 要 注意 ，prepend 选项 不 能 在 重复 引用 一 个 项 目 时 启用 ， 比 
如 项 目 A 引用 项 目 B 和 项 目 C， 而 项 目 B 和 项 目 C 都 引用 项 目 D， 则 A 中 会 出 现 重复 的 D， 
从 而 导致 错误 。 

最 后 ， 目 前 在 TypeScript 3.0 及 以 上 版 本 中 ， 项 目 支持 增 量 构建 。 我 们 可 以 用 tsc 命令 和 
--build 参数 一 起 进行 增 量 构建 。 运 行 tsc --build (也 可 以 简写 tsc -b) 会 执行 如 下 操作 : 

第 一 步 ， 找 到 所 有 引用 的 工程 。 

第 二 步 ， 检 查 它们 是 否 为 最 新 版 本 ， 不 是 最 新 的 情况 下 才 会 增 量 构建 。 

第 三 步 ， 按 顺序 构建 非 最 新 版 本 的 工程 。 


蝇 --build 必须 是 tsc 的 第 一 个 参数 。 | 


tsc -b 项 目 构建 命令 可 以 指定 多 个 配置 文件 地 址 ， 和 tsc -p 命令 一 样 ， 如 果 配 置 文件 名 为 
tsconfig.json， 那 么 文件 名 可 以 省 略 。tsc -b 项 目 构建 命令 示例 如 下 : 


01 > tsc -b # 当 前 目录 tsconfig.json 构建 项 目 
02 > tsc -b src #src 目录 中 tsconfig.json 构建 项 目 
03 >tsc-bmy.tsconfig.json src# src 目录 tsconfig.json 和 当前 目录 my.tsconfig. 
json 构建 项 目 
不 需要 担心 命令 行 上 指定 的 文件 顺序 ，tsc 会 根据 需要 重新 进行 排序 ， 被 依赖 的 项 会 优先 
构建 。tsc -b 还 支持 其 他 一 些 选项 : 


--verbose: 打印 详细 的 日 志 (可 以 与 其 他 标记 一 起 使 用 ) 。 

--dry: 显示 将 要 执行 的 操作 但 是 并 不 真正 进行 这 些 操作 。 

--clean: 删除 指定 工程 的 输出 (可 与 --dry 一 起 使 用 ， 但 不 能 和 --verbose 一 起 使 用 ) 。 
--force: 把 所 有 工程 当 作 非 最 新 版 本 对 待 。 

@  --watch: 观察 模式 (可 以 与 --verbose 一 起 使 用 ) 。 


项 目 引用 中 的 一 个 最 佳 实践 是 : 由 一 个 类 似 解决 方案 的 tsconfig.json 文件 用 于 引用 所 有 的 
子 工程 。 这 样 在 TypeScript 项 目的 顶级 根 目录 下 ， 可 以 简单 地 运行 tsc -b 来 构建 所 有 的 项 目 ， 
因为 在 顶级 根 目 录 下 的 tsconfig.json 文件 中 列 出 了 所 有 的 子 工程 。 其 实 如 果 想 查看 详细 的 构建 
日 志 ， 可 以 用 --verbose 命令 参数 ， 如 图 9.8 所 示 。 


PS C:\VSrc\C8983> +t -b --verbose --force .\tsconfig.json 
[22:53:49] Projects in this build: 
* common/tsconfig.json 


* server/tsconfig.json 
* client/tsconfig.json 
* tsconfig.json 


9.8 tsc -b --verbose 打印 详细 的 构建 顺序 界面 
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三 斜 线 指令 是 包含 单个 XML 标签 的 单行 注释 。 注 释 的 内 容 会 作为 编译 器 指令 使 用 。 三 斜 
线 指令 只 能 放 在 文件 的 最 顶端, 一 个 三 斜 线 指令 的 前 面 只 能 出 现 单行 或 多 行 注释 , 包括 其 他 的 
三 斜 线 指令 。 如 果 它 们 出 现在 一 个 语句 或 声明 之 后 ,那么 三 斜 线 会 被 当 作 普通 的 单行 注释 ,并 
且 不 具有 特殊 的 含义 。 三 斜 线 指令 的 基本 语法 如 下 : 

/// 指令 


当 使 用 --out 或 --outFile 时 , 它 也 可 以 作为 调整 输出 内 容 顺 序 的 一 种 方法 。 文件 在 输出 文件 
内 容 中 的 位 置 与 经 过 预 处 理 后 的 输入 顺序 一 致 ,编译 器 会 对 输入 文件 进行 预 处 理 来 解析 所 有 三 
斜 线 引 用 指令 。 在 这 个 过 程 中 ， 额 外 的 文件 会 加 到 编译 过 程 中 。 

在 这 个 过 程 中 , 项 目 中 的 特定 文件 按 指定 的 顺序 进行 预 处 理 。 在 一 个 文件 被 加 入 列表 前 ， 
它 包 含 的 所 有 三 斜 线 引 用 都 要 被 处 理 。 一 个 三 斜 线 引 用 路 径 是 相对 于 包含 它 的 文件 而 言 的 。 


坊 引用 不 存在 的 文件 会 报错 。 一 个 文件 用 三 斜 线 指令 引用 自己 会 报错 。 | 


如 果 指定 了 --noResolve 编译 选项 ， 那 么 三 斜 线 引 用 会 被 忽略 ， 它 们 不 会 增加 新 文件 ， 也 
不 会 改变 给 定 文件 的 顺序 。 
三 斜 线 指令 主要 有 以 下 几 种 : 


® /<reference path="..." /> 


/// <reference path="…" 伺 指令 是 三 斜 线 指令 中 最 常见 的 一 种 ， 用 于 声明 文件 间 的 依赖 。 三 
斜 线 引 用 告诉 编译 器 在 编译 过 程 中 要 引入 的 额外 文件 。 


® /<reference types="..."/> 


/// <reference types="..…"/> 指 令 用 来 声明 依赖 关系 ,表明 对 某 个 包 的 依赖 。 对 这 些 包 的 名 
字 的 解析 与 在 import 语句 里 对 模块 名 的 解析 类 似 。 可 以 简单 地 把 三 斜 线 类 型 引用 指令 当 作 
import 声明 的 包 。 例如， 把 ///<reference types="node"/> 引 入 到 声明 文件 ， 表 明 这 个 文件 使 用 
了 @types/node/index.d.ts 里 面 声明 的 名 字 , 并 且 这 个 包 需 要 在 编译 阶段 与 声明 文件 一 起 被 包 
含 进来 。 

仅 当 在 我 们 需要 写 一 个 d.ts 文件 时 才 使 用 这 个 指令 。 对 于 那些 在 编译 阶段 生成 的 声明 文 
件 , 编译 器 会 自动 添加 /// <reference types=".…." 亡 。 当 且 仅 当 结 果 文 件 中 使 用 了 引用 的 包 里 的 声 
明 时 才 会 在 生成 的 声明 文件 里 添加 /// <reference types=".…" 户 语句 。 


lL 


® /<reference no-default-lib="true"/> 


/// <reference no-default-lib="true"/> 指 令 把 一 个 文件 标记 成 默认 库 。 你 会 在 lib.d.ts 文件 和 
它 不 同 的 变 体 的 顶端 看 到 这 个 注释 。 这 个 指令 告诉 编译 器 在 编译 过 程 中 不 要 包含 这 个 默认 库 
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〈 比 如 lib.d.ts) 。 这 与 在 命令 行 上 使 用 --noLib 相似 。 


有 当 传递 了 -skipDefaultLibCheck 时 ， 编 译 器 只 会 忽略 检查 带 有 /// <reference no-default-lib="true" 户 
| 的 文件 。 


® /<amd-module /> 


/1/ <amd-module 广 指 令 人 允许 给 编译 器 传 入 一 个 可 选 的 模块 名 ， 默 认 情 况 下 生成 的 AMD 模 
块 都 是 匿名 的 。 但 是 ， 当 一 些 工 具 需 要 处 理 生成 的 模块 时 会 产生 问题 。 


一 目前 1/ <amd-module /> 指令 已 被 朗 奔 ， 使 用 import "模块 名 “语句 来 代 痊 。 | 


® /<amd-dependency path="x" /> 


/// <amd-dependency path="x" /> 指令 可 以 让 编译 器 识别 一 个 非 TypeScript 模块 依赖 项 作为 
目标 模块 require 调用 的 一 部 分 。 该 指令 还 可 以 带 一 个 可 选 的 name 属性 来 传 入 一 个 可 选 名 字 。 


日. 小 结 


本 章 主 要 对 TypeScript 中 的 声明 文件 、 项 目 配置 和 项 目 引用 以 及 三 斜 线 指令 进行 介绍 。 声 
明文 件 中 只 给 出 相关 变量 、 函 数 和 类 等 的 签名 ， 并 不 包含 具体 实现 。TypeScript 可 以 利用 声明 
文件 来 进行 静态 类 型 检查 和 代码 智能 提示 。 项 目 配置 的 编译 选项 比较 多 , 可 以 通过 配置 来 实现 
各 种 自 定义 的 编译 需求 。 

在 TypeScript 3.0 及 以 上 版 本 中 ， 新 增 了 项 目 引 用 的 功能 ， 可 以 更 好 地 进行 项 目 拆 分 以 及 
加 快 项 目 构建 速度 。 项 目的 增 量 构建 更 是 一 个 强大 的 功能 。 三 斜 线 指令 可 以 作为 编译 器 指令 使 
用 ，reference 三 斜 线 指令 主要 用 来 确定 依赖 关系 。 
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第 10 章 


实战 : 使 用 TypeScripf+Node 
创建 列表 APP 


本 章 将 综合 前 9 章 的 知识 点 ， 用 实战 项 目的 方式 从 零 开 始 构建 一 个 简单 的 列表 APP。 通 
过 本 章 的 学 习 ， 可 以 让 读者 掌握 TypeScript 项 目的 基本 构建 步骤 ， 更 好 地 让 读者 将 TypeScript 
中 的 基础 知识 点 有 机 地 整合 起 来 ， 进 而 融会 贯通 。 

目前 随 着 网 络 的 发 展 和 手机 硬件 的 不 断 升 级 , 很 多 传统 的 应 用 都 在 不 断 地 往 移 动 端 进行 转 
移 。 目 前 手机 端 APP 的 开发 方式 主要 有 原生 APP 开发 、H5 APP 开发 和 混合 APP 开发 。 原 生 
APP 用 户 体验 往往 比较 好 ， 而 且 可 以 很 好 地 访问 手机 硬件 ， 功 能 强大 ， 操 作 更 流畅 ， 但 是 开 
发 周期 长 、 成 本 高 。H5 开发 的 APP 由 于 其 跨 平台 的 特征 ， 可 以 提高 开发 效率 、 缩 短 开发 周期 
并 降低 成 本 。 混 合 APP 重点 解决 基于 H5 的 APP 应 用 不 流畅 和 体验 不 好 的 问题 。 可 以 借助 混 
合 APP 应 用 引擎 提供 的 Native 交互 能 力 ， 让 H5 开发 的 APP 应 用 基本 接近 原生 APP 的 效果 。 
本 章 的 项 目 不 涉 及 硬件 ， 因 此 可 以 利用 HS 来 开发 列表 APP。 

本 章 主要 涉及 的 知识 点 有 : 

@ 项 目 构建 的 基本 步骤 及 项 目 配置 

@ APP 前 端 UI 设 计 和 开发 过 程 

@ APP 后 端 设计 和 开发 过 程 

@ HS APP 的 打包 和 发 布 过 程 


创建 项 目 


H5 开发 APP 其 实 就 是 一 个 Web 应 用 ， 只 是 UI 要 更 好 地 适 配 移动 端 。 另 外 ， 考 虑 到 速度 
等 问题 ， 要 尽量 使 用 轻 量 级 的 JS 库 。 本 项 目 可 以 分 为 前 端 UI Client 和 后 端 服务 Server 两 个 子 
项 目 。 

构建 项 目的 时 候 , 首先 我 们 需要 对 项 目 目录 结构 进行 梳理 和 设计 , 这 对 于 后 期 的 项 目 维护 
和 升级 都 是 非常 有 好 处 的 。 项 目的 整体 逻辑 架构 如 图 10.1 所 示 。 
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Android/IOS 中 的 WebView 


H5 UI Web 服 务 器 


人 
Ajax 请 求 
+ 


NodeJSs RESTful API 应 用 服务 器 


数据 库 服 务 器 ( SQLServer/mySQL/Oracle) 


10.1 项 目的 整体 逻辑 架构 示意 图 


从 图 10.1 可 以 看 出 ， 整 个 列表 APP 项 目 可 以 从 逻辑 上 分 成 4 层 。 此 项 目 是 用 HS 开发 的 
应 用 APP， 虽 然 用 户 可 以 直接 利用 手机 浏览 器 访问 这 个 APP， 但 是 需要 每 次 输入 网 址 并 不 方 
便 。 因 此 ， 一 般 来 说 ， 需 要 用 原生 技术 开发 一 个 H5 容器， 其 实 就 是 封装 一 个 WebView 的 控 
件 来 定位 到 H5 UI Web 服务 器 的 网 址 上 。 


| WebView 本 身 也 提供 了 JS 和 原生 函数 的 交互 功能 ， 因 此 ，H5 开发 的 应 用 也 是 可 以 访问 
t 一 定 的 硬件 接口 的 。 


一 般 来 说 ，H5 UI 和 后 台 的 API 服务 都 是 一 个 Web 项 目 ， 作 为 整体 进行 部 署 ， 这 样 也 不 
会 出 现 跨 域 访问 的 问题 。 本 项 目 将 H5 UI 和 后 台 的 API 服务 分 开 ， 既 可 以 部 署 到 一 台 服 务 器 ， 
也 可 以 部 署 到 多 台 不 同 的 服务 器 上 。 

为 了 提高 性 能 和 安全 性 ， 数 据 库 服务 器 和 “Web 服务 器 都 部 署 在 不 同 的 服务 器 上 。 由 于 
Web 服务 器 会 暴露 端口 到 互联 网 上 ， 容 易 遭 受 外 部 攻击 ， 但 是 最 有 价值 的 是 数据 ， 因 此 需要 


对 数据 库 服务 器 进行 重点 保护 和 隔离 。 
将 项 目 进行 合理 拆 分 ,一 方面 可 以 降低 单个 项 目的 复杂 度 , 另 一 方面 可 以 将 项 目 分 层 部 署 ， 
提高 应 用 的 并 发 访问 能 力 。 


一 般 来 说 , 项 目 根据 用 户 量 和 并 发 量 等 , 设计 的 架构 也 是 不 一 样 的 。 项 目的 分 层 设计 和 部 
署 的 好 处 就 是 可 以 根据 应 用 程序 的 预 估 访 问 量 等 因素 将 项 目 部 署 到 一 台 物 理 机 上 , 也 可 以 部 署 
到 不 同 的 物理 机 上 ,甚至 可 以 利用 负载 均衡 (硬件 和 软件 ) 技术 来 将 同一 个 层 部 署 到 多 个 物理 
机 上 。 

如 果 应 用 人 数 比 较 少 ,或 者 用 于 前 提 开 发 和 测试 ,就 可 以 将 项 目 整体 部 署 到 一 台 物 理 机 上 ， 
如 图 10.2 所 示 。 


6 一 b 十 归 一 力 一 园 


APP Client 端 服务 器 Server 端 服务 器 。 数据 库 服务 器 


图 10.2 开发 阶段 项 目的 物理 架构 示意 图 
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如 果 要 正式 上 线 , 一 般 可 以 用 3 台 物 理 机 分 别 部 署 H5 UI Web 服务 器 、RESTful API 应 用 
服务 器 和 数据 库 服务 器 。 对 于 访问 量 比 较 大 的 情况 , 可 以 利用 服务 器 集群 的 方式 来 分 挫 单 台 服 
务 器 的 压力 ， 从 而 提高 整体 的 并 发 量 , 最 简单 的 就 是 利用 Nginx 来 进行 请 求 的 自动 路 由 ， 从 而 
达到 负载 均衡 的 目的 。 负 载 均衡 下 项 目的 物理 架构 如 图 10.3 所 示 。 


< 外。 
外 一 -上 本- 
Ciient 训 服务 器 服务 器 数据 库 服务 器 
APP Nginx 负 载 均 从 加 i 
CO 
TT 
S 


Client 应 服 务 器 Server 端 服务 器 
图 10.3 负载 均衡 下 项 目的 物理 架构 示意 图 


项 目的 目录 结构 应 该 符合 整体 项 目的 架构 设计 。 这 里 首先 创建 一 个 文件 夹 my-list-app 作 
为 列表 APP 的 解决 方案 目录 ， 也 就 是 项 级 根 目 录 。 然 后 用 Visual Studio Code 打开 此 目录 ,并 
构建 如 图 10.4 所 示 的 项 目 目录 结构 。 
4 MY-LIST-APP 
4 client 
> dist 
4 libs 
b src 
{} packagejson 
{} tsconfig.json 
4 server 
» dist 
b src 
{} packagejson 
{} tsconfigjson 
{} packagejson 
{} tsconfigjson 


10.4 项 目 初始 目录 结构 图 


本 项 目 是 用 TypeScript 来 开发 的 ， 前 端 运行 在 浏览 器 环境 中 ， 后 台 服 务 运行 在 NodeJS 环 
境 中 。 因 此 ， 开 发 此 列表 APP 的 前 提 是 已 经 安装 好 TypeScript 开发 所 需要 的 基础 环境 。 这 里 
假设 已 经 将 开发 环境 搭建 完成 了 ， 不 清楚 如 何 搭建 的 读者 可 以 参考 第 1 章 中 安装 TypeScript 


相关 章节 的 内 容 。 
从 图 10.4 可 以 看 出 ，my-list-app (在 Visual Studio Code 中 显示 为 大 写 ) 是 一 个 解决 方案 
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目录 ， 其 中 有 一 个 tsconfig.json， 作 为 解决 方案 的 配置 文件 。 顶 级 根 目录 下 有 一 个 表示 前 端的 
项 目 文件 夹 client 和 一 个 表示 后 端 服务 的 项 目 文件 夹 server。 

client 和 server 文件 夹 里 面 都 包含 一 个 tsconfigjson， 作 为 子 项 目的 项 目 配置 文件 。client 
和 server 文件 夹 里 都 有 一 个 src 目录 ， 表 示 存 放 的 TypeScript 文件 ; dist 目录 存放 src 中 心 文 
件 生成 的 相关 js 文件 。client 中 有 一 个 libs 文件 夹 ， 用 于 存放 一 些 外 部 的 js 库 ， 例 如 jquery。 


1 0 . 2 配置 tsconfig.json 


由 于 本 项 目 可 拆 分 成 client 和 server 两 个 子 项 目 ， 因 此 在 配置 tsconfigjson 的 时 候 需要 对 
各 个 子 项 目 分 别 进行 配置 .配置 server 项 目 中 的 tsconfig.json 文件 , 具体 内 容 如 代码 10-1 所 示 。 


【代码 10-1】 server 项 目 中 的 tsconfig.json 文件 示例 : tsconfig.json 


01 { 

02 "compilerOptions": { 

03 "module": "commonjs", 
04 "target": "es5"， 

05 "noImplicitAny": true, 
06 "removeComments": true, 
07 "sourceRoot": "src", 
08 woutDir"s "dist", 

09 "sourceMap": true 

10 }， 

bl "Tnclude™s: [ 

Ee Porc/ 

3 ]， 

14 "exclude": [ 

5 "node modules" 

16 ] 

Ey } 


在 代码 10-1 中 ， 通 过 include 属性 将 项 目 包含 的 目录 限定 在 src 目录 下 ， 同 时 排除 
node_modules 目录 ， 这 样 可 以 提高 加 载 速度 。"outDir": "dist" 表 示 源 码 输出 的 目录 为 dist 目录 ， 
"sourceRoot": "src" 表 示 让 调试 器 到 src 目录 中 寻找 TypeScript 文件 。"module": "commonjs" 表 示 
模块 系统 采用 CommonJS， 即 NodeJS 可 以 识别 的 模块 机 制 。"target": "es5" 表 示 模 块 代码 生成 
的 JS 规范 为 ES5。 配 置 sourceMap 为 true 以 方便 调试 。 


总 默认 情况 下 ， 在 Visual Studio Code 中 设置 "compileOnSave": true 无 效 。 | 


其 次 ， 配 置 client 项 目 中 的 tsconfig.json 文件 ， 具 体内 容 如 代码 10-2 所 示 。 
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【代码 10-2】 client 项 目 中 的 tsconfig.json 文件 示例 : tsconfig.json 


01 { 

02 "compilerOptions": { 

03 "module": "amd", 

04 "target™" "as5™ 

05 "noImplicitAny": true, 

06 "removeComments": true, 

07 nSOUrCeRoot"s SPC 

08 MotDire wdlst 

09 "sourceMap": true 

10 }， 

11 "include": [ 

到 ne 

13 ]， 

14 "exclude": [ 

bh, "node modules","dist","libs" 

16 ] 

417 

在 client 项 目 中 ， 同 样 将 src 目录 中 的 源码 编译 到 dist 目录 中 。 配 置 sourceMap 为 true 方 
便 调 试 。 


| 在 代码 10.2 中 ， 我 们 将 "module" 设 置 为 "amd"， 这 样 更 适合 于 浏览 器 环境 。 | 


根 目 录 中 的 tsconfig.json 设置 为 空 ， 不 用 特别 设置 。 启 动 解决 方案 中 的 client 和 server 两 
个 项 目 ， 不 仅仅 是 项 目 编译 的 问题 ， 还 涉及 启动 相关 服务 的 功能 ， 我 们 用 其 他 方式 来 处 理 。 


1 0 .了 引 列表 App 的 前 端 设 计 与 开发 


软件 开发 也 需要 有 工程 管理 的 思想 , 一 般 会 有 一 个 项 目 整体 计划 , 基本 涵盖 项 目 立项 到 项 
目 验 收 的 全 过 程 。 软 件 项 目 一 般 要 从 立项 开始 ， 经 过 软件 范围 界定 、 需 求 分 析 、 软 件 的 总 体 结 
构 设 计 、 功 能 模块 设计 、 软 件 编码 和 调试 ， 直 到 上 线 试 运行 以 及 验收 完成 。 

这 里 只 对 列表 APP 应 用 的 设计 和 开发 进行 说 明 。 由 于 列表 APP 可 分 成 client 和 server 两 
个 部 分 ， 我们 先 对 列表 APP 的 前 端 进行 设计 和 开发 。 本 项 目的 范围 就 界定 在 实现 一 个 简单 的 
便签 列表 APP， 用 户 登录 后 ， 可 以 查看 、 新 增 和 编辑 自己 添加 的 便签 。 便 签 可 以 按照 已 完成 
的 和 未 完成 的 分 别 进行 查看 。 

一 般 来 说 ， 公 司 都 会 由 一 个 UI 工程 师 专 门 给 出 设计 图 ， 然 后 转 由 开发 进行 实现 。 这 里 就 
不 过 多 纠结 UI 美观 度 的 问题 了 ， 更 多 的 是 从 功能 实现 的 角度 来 阐述 。 在 软件 开发 过 程 中 ,为 
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了 提升 沟通 的 效果 ,往往 需求 分 析 师 会 将 需求 用 原型 工具 进行 绘制 ,这样 和 客户 、 软 件 开发 人 
员 进 行 沟 通 的 时 候 很 具体 ， 也 更 容易 理解 。 

为 了 简化 复杂 度 ， 我 们 的 列表 APP 只 包含 核心 的 功能 : 登录 、 主 界面 、 便 签 管理 。 

1. 登录 

登录 界面 给 出 示意 图 ， 如 图 10.5 所 示 。 

登录 界面 主要 是 由 用 户 名 和 密码 控件 构成 的 ， 当 输入 完成 后 , 单 击 “登录 ”按钮 即 可 登录 。 

2. APP 主 界面 

主 界面 一 般 有 一 个 轮 播 的 区 域 , 可 以 用 来 显示 一 些 宣传 的 标语 或 者 新 闻 图 片 内 容 。 菜 单 区 
域 是 一 个 9 宫 格 ， 这 里 将 列表 APP 只 作为 主 界面 中 的 一 个 模块 来 实现 ， 这 样 的 好 处 是 ， 后 续 
可 以 再 添加 新 的 功能 模块 。APP 主 界面 如 图 10.6 所 示 。 


列表 APP 
岂 手机 号 /用 户 名 
自 让 码 
便于 列表 
EE 
图 10.5 APP 登录 示意 图 图 10.6 APP 主 界面 示意 图 
3. 便签 列表 管理 


当 通 过 主 界面 的 便签 列表 进入 子 页 面 时 , 默认 先是 一 个 便签 的 列表 , 只 显示 未 完成 状态 的 
便签 ， 如 图 10.7 所 示 。 

对 于 已 经 完成 的 便签 ， 可 以 通过 切换 进行 查看 。 同 时 可 以 通过 底部 工具 栏 的 “新 建 ” 按钮 
新 建 便签 ， 如 图 10.8 所 示 。 
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< 便签 列表 
SE 下 型 除 v 充 成 
© 关头 和 0 在 关 六 站 i 
st Ce 
新 建 
图 10.7 便签 列表 界面 示意 图 图 10.8 ”便签 新 建 界面 示意 图 
其 他 一 些 前 端 UI 设计 图 这 里 就 不 再 给 出 了 。 下 面 重点 介绍 一 下 为 了 开发 出 这 些 UI 界面 

如 何 进行 编码 。 


首先 在 client 中 新 建 一 个 views 目录 ， 然 后 新 建 一 个 index.html 文件 用 作 首 页 。 我 们 将 其 
他 类 似 登 录 、 列 表 管理 等 界面 放 于 views 目录 中 。 最 终 的 client 目录 结构 如 图 10.9 所 示 。 


» ydui 
» node modules 

4 sc 

TS chgpwdts 

Ts logints 

Ts mets 

Ts templated 

Ts todolistts 

4 views 

© chgpwd html 

© loginhtml 

© mehtml 

© todolisthtml 

{} bs-configjson 
© indexhtml 

{} package-lockjson 
{) packagejson 
{} tsconfigjson 


10.9 client 整体 目录 结构 图 


从 图 10.9 中 可 以 看 出 , views 里 面 的 文件 和 src 目录 中 的 文件 是 对 应 的 , 也 就 是 一 个 *.html 
对 应 一 个 *.ts 。 这 里 的 前 端 H5 UI 库 依 赖 于 YDUI 和 jQuery (YDUI 也 依赖 于 jQuery) , html 
中 的 脚本 引入 的 是 *.ts 生成 的 位 于 dist 里 面 的 *.js 文件 。 
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由 于 项 目的 很 多 包 都 要 依赖 于 npm， 因 此 client 项 目 中 需要 一 个 package.json 文件 。 另 外 ， 
为 了 能 够 进行 更 好 的 热 更 新 预览 ， 这 里 需要 安装 lite-server 包 ， 用 bs-config.json 文件 作为 启动 
配置 。 


各 如 果 要 在 TypeScript 项 目 中 使 用 jQuery， 就 需要 安装 其 声明 文件 ， 可 以 通过 npm install 
l @types/jquery 进行 安装 。 


以 登录 为 例 ， 登 录 页 面 是 views 文件 夹 中 的 login.html。 页 面 的 具体 内 容 可 以 参考 本 书 配 
套 的 代码 。 其 中 ，login.html 里 面 引入 的 脚本 如 下 所 示 。 

01 <script src="/libs/ydui/js/jquery2.1.4.min.js"></script> 

02 <script src="/libs/ydui/js/ydui.js"></script> 

03 <script src="/libs/ydui/js/ydui.flexible.js"></script> 

04 <script src="/dist/login.js"></script> 

注意 ，04 行 中 的 /dist/login.js 实际 就 是 src 目录 中 的 login.ts 生成 的 JS 文件 。login.ts 内 容 
如 代码 10-3 所 示 。 


【代码 10-3】 登录 logints 文件 示例 : login.ts 


01 namespace jYd { 


02 let API BASE ="http://localhost:8088"; 

03 export function login(uname: string, upwd: string,callback: (data:any, 
status:any)=>void) { 

04 $.post (API BASE+"/login", { 

05 uname:uname, 

06 upwd: upwd 

07 }, 

08 callback 

09 ) 7 

10 

11 } 

bbe $ (document) .ready (function() { 

让 | $('#btnLogin') .click(function() { 

14 let uid = $("#txtuid") .val (); 

Ee let upwd = $("#txtpwd") .val (); 

16 jYd.login(<string>uid,<string>upwd, function (data, status){ 

和 7 if(data.succss===1){ 

18 localStorage.setIitem("token",data.data); 

19 window.location.href="/index.html"; 

20 

2 elsef 

2 console.log (data.message); 

23 } 
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在 代码 10-3 中 ， 大 量 地 使 用 了 jquery 库 中 的 API，02 行 声明 了 一 个 APL BASE 地 址 ， 此 
为 Server 端的 API 服务 地 址 。 注 意 ， 端 口 为 8088。01 到 11 行 声明 了 一 个 jYd 命名 空间 ， 其 
中 对 外 暴露 一 个 函数 login, 接受 两 个 字符 类 型 的 参数 (一 个 表示 用 户 名 , 一 个 表示 用 户 密码 )， 
同时 接受 一 个 回调 函数 callback。 函 数 login 用 ajax 中 的 post 方法 向 服务 器 发 送 请 求 。 

如 果 服 务 器 端 成 功 响 应 ， 那 么 返回 的 结果 中 data.succss 为 1， 失 败 为 0。 同 时 data 还 有 一 
个 message 属性 ， 可 以 提供 后 台 提供 的 消息 。 表 10.1 给 出 Client 端 主要 页 面 的 名 称 和 说 明 。 


表 10.1 client 页 面 说 明 
HTML 页 面 说 明 src 对 应 的 TS 文件 | dist 对 应 的 JS 文件 


views/login.html APP 登录 页 面 [| login.js 
APP 主 界面 页 面 


[| 
可 以 查看 登录 用 户 的 信息 和 修改 密码 
修改 密码 chgpwdiis 
View: olist.ntm 改 、 查 功能 的 核心 页 面 Lodolist.]s 
ts 文件 需要 用 到 的 JS 库 的 声明 文件 | | 
声明 文件 template.d.ts 如 代码 10-4 所 示 。 
【代码 10-4】 template.d:ts 代码 示例 : template.d.ts 


01 declare function template(id:string,1ist:any) :any7 


02 declare namespace YDUI{ 


03 namespace dialog{ 

04 function alert (msg:string) :void; 
05 

06 } 


07 //jquery 扩展 方法 声明 

08 declare interface JQuery<TElement = HTMLElement>{ 
09 actionSheet (action:string) :void; 

10 上 


在 代码 10-4 中 ， 主 要 声明 了 一 个 JS 模板 引擎 arttemplate 库 中 的 template 方法 、 一 个 
YDUI.dialog.alert 方法 和 一 个 jQuery 扩展 方法 actionSheet。 这 几 个 JS 方法 会 在 TypeScript 文 
件 中 使 用 。 如 果 不 提 供 此 声明 文件 ， 就 不 能 调用 ， 否 则 会 报错 。 

其 中 ，todolist.ts 是 本 APP 的 核心 ， 里 面 定义 了 便签 增 、 删 、 改 、 查 的 API 请 求 。 下 面 分 
别 对 几 个 核心 功能 进行 说 明 。 首 先 介绍 一 下 列表 的 查询 函数 getList， 函 数 的 实现 部 分 如 代码 
10-5 所 示 。 
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【代码 10-5】 查询 列表 函数 getList 代码 示例 : todolist.ts 


01 export function getList(userid: string, isdone: string, callback: (data: 


any, status: any) => void) { 


02 $.post (API BASE + "/query", { 

03 table: "“t002", 

04 where: "userid=@userid and isdone=@isdone", 
05 Params: JSON .stringify([ 

06 { "name": "userid", value: userid }, 
07 { "name": "isdone", value: isdone } 
08 ])， 

09 order: "addtime desc" 

10 }, 

11 callback 

这 ) 7 

13 } 


在 代码 10-5 中 ， 查 询 的 时 候 需 要 提供 两 个 文本 类 型 的 参数 和 一 个 回调 函数 。 由 于 不 同人 
创建 的 便签 列表 是 隔离 的 ， 因 此 必须 根据 当前 用 户 的 ID 来 对 便签 列表 进行 过 滤 查 询 。 另 外 ， 
由 于 可 以 分 开 查询 已 完成 和 未 完成 的 列表 ， 因 此 可 以 用 第 二 个 参数 isdone 来 限定 。 从 02 行 可 
以 看 出 ， 后 台 查 询 服务 的 API 为 /query。 查 询 成 功 后 通过 回调 函数 callback 中 的 第 一 个 参数 即 
可 获取 相关 后 台 提 供 的 数据 。 

为 了 构建 一 些 通 用 的 服务 ， 这 里 将 查询 参数 进行 了 后 台 封 装 ， 从 前 台 可 以 传 入 一 些 构 成 
SQL 的 部 件 ， 后 台 服 务 会 解析 前 台 参 数 来 构建 SQL。 


Web 应 用 中 首先 要 注意 的 安全 问题 就 是 SQL 注入 问题 。 因 此 实际 项 目 中 应 该 对 前 台 的 参 
数 进行 验证 和 过 滤 ， 从 而 防止 SQL 注入 导致 的 信息 外 泄 或 者 其 他 安全 问题 。 


其 次 介绍 一 下 列表 的 删除 函数 deleteList， 函 数 的 实现 部 分 如 代码 10-6 所 示 。 
【代码 10-6】 删除 列表 函数 deleteList 代码 示例 : todolist.ts 


01 export function deleteList (id: string, callback: (data: any, status: any) 


=> void) { 
02 $.Post (API BASE + "/delete", { 
03 table: "t002", 
04 where: "id=@id", 
05 Params: JSON.stringify([{ "name": "id", value: id }]) 
06 ]}， 
07 callback 
08 ) 7 
09 和 


在 代码 10-6 中 ，deleteList 函数 需要 一 个 文本 类 型 的 列表 ID 参数 和 一 个 回调 函数 。03 行 
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中 的 table 属性 只 是 一 个 索引 ， 不 是 真实 的 表 名 。where 属性 设 为 id=@id， 本 身 用 SQL 的 占 位 
符 是 一 种 防止 SQL 注入 的 常用 方式 ， 而 不 是 用 字符 串 拼接 构建 SQL。 


where 属性 的 值 本 身 就 是 一 个 合法 SQL 的 一 部 分 ， 因 此 这 里 最 容易 进行 SQL 注入 ， 比 如 
用 id=@id or 1=1 就 可 能 把 所 有 数据 删除 。 因 此 实战 中 ， 这 个 where 部 分 传 值 中 不 允许 有 
空格 ，or ,-- drop 等 危险 字符 。 
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再 次 介绍 一 下 列表 的 编辑 函数 editList， 函 数 的 实现 部 分 如 代码 10-7 所 示 。 
【代码 10-7】 编辑 函数 editList 代码 示例 : todolist.ts 


01 


02 
03 
04 
05 
06 
07 
08 
09 


export function editList (data: string, callback: (data: any, status: any) 
=> void) { 
$.post (API BASE + "/update", { 
table: "t002", 
key: "id", 


params: data 


callback 


在 代码 10-6 中 , 需要 修改 的 值 以 键 值 对 的 方式 转 成 文本 传递 给 editList 中 的 第 一 个 参数 即 
可 。04 行 表示 当前 操作 的 表 的 主键 字段 为 id。 
最 后 介绍 一 下 列表 的 新 建 函 数 newList， 函 数 的 实现 部 分 如 代码 10-8 所 示 。 


【代码 10-8】 编辑 函数 newList 代码 示例 : todolist.ts 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
lb 
12 
3 


export function newList(title: string, type: string, userid: string, 
callback: (data: any, status: any) => void) { 
$.Post (API BASE + "/insert", { 
table: "t002", 
Params: JSON.stringify([ 
{ "name": "title", value: title }, 
{ "name": "type", value: type }, 
{ "name": "userid", value: userid } 
I 
}, 
callback 
); 


第 10 章 实战 : 使 用 TypeScript+Node 创建 列表 APP 


至 此 ， 列 表 管 理 中 的 核心 函数 就 介绍 完了 。 关 于 这 些 请 求 的 后 台 服 务 将 在 下 一 节 中 进行 介绍 。 

前 台 UI 可 以 独立 运行 ， 开 发 的 时 候 我 们 用 lite-server 提供 服务 。lite-server 工具 可 以 搭建 
本 地 服务 器 ， 它 的 优势 在 于 搭建 迅速 ， 只 需要 安装 npm 包 即 可 。 另 外 ， 它 使 用 BrowserSync 
监测 文件 变化 ,实现 热 更 新 ， 可 自动 刷新 页 面 最 后 可 配置 多 种 选项 ， 如 默认 端口 及 默认 文件 
夹 等 。 下 面 给 出 client 项 目 lite-server 的 bs-config.json 配置 文件 内 容 ， 如 代码 10-9 所 示 。 


【代码 10-9】 bs-config.json 配置 示例 : bs-configjson 


01 { 

02 "port": 8000, 

03 mEllesms Lm/ Thtm htm, Car js} le 
04 Worverns ( "basoDiry Mo/ 

05 } 


代码 10-9 给 出 了 默认 端口 是 8000, 监控 根 目录 中 扩展 名 为 html、htm、cssjs 文件 的 变化 ， 
并 适时 刷新 页 面 。 


TOO.4， 列表 App 的 服务 端 设 计 与 开发 


服务 端 采用 NodeJS 作为 运行 环境 .NodeJS 配合 Express 可 以 快速 搭建 RESTful API 服务 。 
因此 首先 需要 安装 相关 的 依赖 库 ， 如 express、body-parser 和 SQL Server 数据 库 驱 动 mssql。 
安装 的 命令 如 下 : 


npm install -D express body-parser mssql 


服务 器 端 由 于 需要 用 到 md5 加 密 算法 以 及 生成 GUID 的 功能 ， 因 此 还 需要 安装 crypto 和 
node-uuid 包 。 


副 在 编码 过 程 中 ， 对 于 调用 node 和 其 他 库 中 的 API， 会 需要 安装 对 应 的 声明 文件 ， 和 否则 会 
报错 。 例 如 ， 安 装 node 声明 文件 为 npm i @types/node。 


以 前 node 中 的 express 框架 每 次 修改 代码 之 后 都 需要 重新 运行 npm start 才能 看 到 更 改 后 
的 效果 ， 非 常 不 方便 。Server 端 中 引入 nodemon 包 ， 实 现 不 用 重启 也 能 自动 更 新 的 目的 。 最 
终 的 packagejson 文件 核心 内 容 如 图 10.10 所 示 。 

最 终 的 Server 端 目 录 结 构 如 图 10.11 所 示 。 
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server 


» dist 
b node modules 


4 src 


Scriptsr 
Ts 
tse": "tse", cryptots 
"start-server": “node ./dist/main.js", TS dbconfigts 
“start": "nodemon ./dist/main.js" 
TS dbhelperts 


TS iconfig.ts 

Ts maints 

TS serverts 

TS tablemap.ts 

TS uuidits 
{} nodemonjson 
{} package-lockjson 
{} packagejson 


{) tsconfigjson 


图 10.10 Server 端 package.json 截图 10.11 Server 端 目录 结构 图 
Server 端 目录 结构 中 各 主要 文件 的 说 明 如 表 10.2 所 示 。 


表 10.2 Server 端 主要 文件 说 明 
TypeScript 文件 说 明 
服务 端 入 口 文件 ， 启 动 后 台 服务 
md5 加 密 函 数 ， 用 于 对 数据 库 密码 进行 加 密 
数据 库 连 接 信息 配置 文件 
定义 数据 库 连接 配置 的 接口 文件 


生成 UUID 作为 主键 ID 值 

表 名 映射 文件 ， 如 t001 表示 hr_ user 
数据 库 访问 帮助 类 

后 台 服务 的 核心 文件 ， 主 要 定义 各 API 的 实现 


首先 介绍 一 下 后 台 服 务 的 入 口 函 数 main.ts， 具 体内 容 如 代码 10-10 所 示 。 
【代码 10-10】 入 口 文件 mainsts 示例 : maints 


01 import { apP as nodeServer } from "./server"; 


02 Var server = nodeServer.listen(8088, function () { 

03 console.log("server is started"); 

04 上 

代码 10-10 导入 了 server.ts 文件 中 定义 的 app 对 象 ， 这 里 重 命名 nodeServer。02 行 给 出 服 
务 器 端 服务 的 端口 为 8088。 启 动 后 打印 一 条 消息 。 

server.ts 是 后 台 服 务 的 核心 文件 , 在 这 个 文件 中 提供 了 几 个 供 外 部 调用 的 API。 代码 10-11 
给 出 server.ts 的 一 段 内 容 。 


【代码 10-11】 serverts 文件 的 部 分 代码 示例 : server.ts 


01 //require 需要 安装 @types/node 
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02 import express = require("express"); 

03 import { tableMap } from "./tablemap"; 

04 import { dbHelper } from "./dbhelper"; 

05 import { dbconfig } from "./dbconfig"; 

06 import { cryptPwd } from "./crypto"; 

07 import { getUUID } from "./uuid"; 

08 export var app = express(); 

09 const bodyParser = require('body-parser'); 
10 // parse application/x-www-form-urlencoded 
2 app.use (bodyParser.urlencoded({ extended: false })); 
有 // parse application/json 

elt app.use (bodyParser.json()); 

14 ”// 设 置 允许 跨 域 访问 该 服务 


35 app.all('*', function (req, res, next) { 


16 res.header ('Access-Control-Allow-Origin’', '*'); 

7 res.header('Access-Control-Allow-Headers', 'Content-Type'); 
18 res.header ('Access-Control-Allow-Methods', '*'); 

19 res.header ('Content-Type', ‘'application/json;charset=utf-8'); 
20 next (); 

21 PY 

ps app.get('/', function (req, res, next) { 

2 res.json({ message: 'Hello API' }); 

24 1); 


在 代码 10-11 中 ,首先 需要 导入 一 些 库 , 其 中 body-parser 主要 用 来 解析 前 台 传 过 来 的 body 
数据 。 默 认 情 况 下 ，express 不 能 很 好 地 获取 前 台 ajax post 过 来 的 数据 。14~21 行 主要 设置 了 
运行 跨 域 访问 的 配置 ， 由 于 其 前 台 端 运行 的 服务 端口 和 Server 端 不 同 ， 因 此 涉及 跨 域 问 题 。 


用 import 载 入 的 模块 可 以 享用 强 类 型 检查 ， 以 及 代码 自动 补 全 和 预 编译 检查 等 。 用 var 
已 则 不 行 。 


server.ts 中 app 对 象 定义 了 多 个 API 服务 。 下 面 给 出 一 个 /query API 的 功能 代码 ， 如 代码 
10-12 所 示 。 


【代码 10-12】 query API 的 功能 代码 示例 : server.ts 


01 app.post("/query", function (req, res, next) { 


02 try { 

03 console.log (req); 

04 // 获 取 表 名 

05 let table = tableMap[req.body.table]; 

06 if (table === Undefined) { 

07 res.json({ succss: 0，message: 'table 未 注册 ' }); 
08 } 
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09 else { 

10 let sql = "select * from " + table + " where " + req.body.where; 
a if(req.body.order){ 

32 sql += " order by " + req.body.order; 

13 上 

14 console.log(sql); 

15 let db = new dbHelper(); 

16 //params[0] [name] :"uid" 

Fy let params = JSON.parse (req.body.params); 

18 console.log (params); 

19 db.runSql (sql, params, function (err, ret) { 

20 if (err) { 

21 res.json({ succss: 0, message: err.message }); 
人 } 

全 else { 

24 res.json({ succss: 1，message: ' 成 功 '，data: ret. 


recordset }); 
25 } 
26 DD); 
27 
28 } 
29 catch (e) { 
30 res.json({ succss: 0, message: e.message }); 
3 } 
32 I 


在 代码 10-12 中 ，app.post 方法 的 第 一 个 参数 表示 API 服务 的 路 径 ， 第 二 个 是 请 求 该 路 径 
后 进行 调用 的 函数 。 该 函数 中 有 三 个 参数 req、res、next。 其 中 ，req 对 象 中 可 以 获取 前 台 请 求 
的 相关 内 容 ，res 对 象 是 响应 对 象 ， 可 以 利用 res.json 向 客户 端 响 应 JSON 数据 。 

第 15 行 的 dbHelper 类 在 dbhelper.ts 中 定义 ， 默认 构造 函数 可 以 加 载 dbconfig.ts 中 的 配置 
来 初始 化 数据 库 连 接 池 对 象 .05 行 通过 一 个 映射 将 前 台 传 入 的 table 参数 换 成 真实 的 数据 库 名 。 
这 种 索引 写法 默认 是 不 支持 的 ， 必 须 特殊 处 理 才 能 正确 运行 。 这 个 特殊 处 理 可 以 在 tablemap.ts 
文件 中 得 到 体现 。 代 码 10-13 给 出 tablemap.ts 文件 内 容 。 


【代码 10-13】 tablemap.ts 文件 代码 示例 : tablemap.ts 


01 export const tableMap:ITableMap ={ 


02 "tO001":"hr user", 

03 "t002":"todos" 

04 } 

05 interface ITableMap{ 

06 [key:string] :string; 
07 } 
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代码 10-13 中 的 05~07 行 定义 的 接口 中 实现 了 文本 索引 的 功能 。 
dbhelper.ts 文件 中 定义 了 最 基础 的 数据 库 访 问 API。 代 码 10-14 给 出 dbhelper.ts 文件 的 具 
体内 容 。 


【代码 10-14】 dbhelper.ts 文件 代码 示例 : dbhelper.ts 


01 import { dbconfig } from "./dbconfig"; 
02 import 1 IConfig } from "-/iconfig™s 
03 import sql = require("mssql"); 

04 export class dbHelper { 


05 Private config: IConfig; 

06 constructor (config?: IConfig) { 

07 if (config =: undefined) { 

08 this.config =dbconfig; 

09 } 

10 else { 

11 this.config = config; 

bE 4 } 

13 } 

14 Public runSql (_sql: string, params: any, func: (err: any, ret: any) 
=> void) { 

a let pool = new sql.ConnectionPool (this.config, function (err) { 

16 if (err) { 

人 func (err,null); 

18 Pool.close() 

19 } 

20 else { 

人 let q = new sql.Request (Pool) 

22 if (params){ 

2 for (let item of params) { 

24 q.input (item.name, item.value); 

2 } 

26 } 

2 q.query(_sql) .then (function (records) { 

28 func(null, records); 

29 pool.close(); 

30 }) .catch (function (err) { 

3 由 funcl(err, null); 

32 pool.close(); 

33 ]) 

34 外 

35 加 时 

36 ] 7 

37 } 
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1 
\ 


吉 NodeJS 和 JavaScript 类 似 ， 本 身 的 调用 都 是 异步 的 ， 如 果 处 理 不 当 ， 可 能 获取 不 到 值 。 后 


台数 据 处 理工 作 比 较 耗 时 ， 等 到 数据 处 理 完成 后 ， 必 须 进 行 回 调处 理 。 


mssql 库 本 身 也 是 支持 Promise 方式 和 async await 方式 进行 函数 调用 的 。 这 里 不 再 阐述 ， 


感 兴趣 的 可 以 去 网 上 自行 学 习 。 最 后 介绍 一 下 数据 库 表 的 设计 ， 本 示例 项 目 非常 简单 ， 就 两 张 


表 ， 


如 图 10.12 所 示 。 
todos hr user 
到 名 数据 尖 型 。 允许 Null .… 列 名 数据 关 型 。 允许 Null 值 
时 id varchar(50) 口 有 uid varchar(50) 口 
te varchar(100) 口 uname varchar(50) 口 
bype varchar(10) 加 upwd varchar(50) 回 
userid varchar(50) 回 nickname varchar(50) 回 
isdone bit 口 empname 。 varchar(50) 回 
addtime datetime 回 cellphone 。 varcharf20) 回 
adduser varchar(50) 回 deptname 。 varcharf50) 回 
modifytime 。 datetime 回 addime datetime 回 
modifyuser 。 varchar(50) 回 四 | 
口 
图 10.12 数据 库 list_db 关系 图 


1 0 .编译 和 启动 服务 器 


上 面 介绍 了 APP 项 目 中 前 端 client 子 项 目 和 服务 端 server 子 项 目的 基本 设计 和 相关 代码 。 
本 节 将 重点 介绍 一 下 如 何 编 译 项 目 和 启动 服务 器 服务 。 
首先 配置 一 下 启动 配置 文件 launch.json 并 新 建 一 个 任务 tasks.json， 列 表 APP 的 项 目 目录 
结构 如 图 10.13 所 示 。 
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4 MY-LIST-APP 


4 Vscode 

{} launchjson 

{} tasksjson 

» client 

» server 

{} package-lockjson 
{} packagejson 

{} tsconfigjson 


10.13 ”列表 APP 项 目 目录 结构 图 


第 10 章 实战 :使 用 TypeScript+Node 创建 列表 APP 


launch.json 启动 配置 文件 可 以 设置 如 何 启 动 项 目 。 代码 10-15 给 出 launchjson 文件 的 具体 
内 容 。 
【代码 10-15】 launch.json 启动 配置 文件 代码 示例 : launch.json 


01 { 

02 RATrSLODE OZ GT7 

03 "configurations": [ 

04 * 

05 "type": "node", 

06 "request": "launch", 

07 "name": "server", 

08 "program": "${workspaceFolder}/server/dist/main.js", 
09 "PreLaunchTask": "tsc_ server", 
10 "outFiles": [ 

3 "${workspaceFolder}/**/*.js" 
be ] 

13 }, 

14 { 

5 "type": "node", 

16 "request": "launch", 

1 "name": "client", 

18 "PreLaunchTask": "start client", 
9 woutFiles": [ 

20 "${workspaceFolder}/**/*.js" 
21 ] 

22 } 

23 ]， 

24 "compounds": [ 

Ee { 

26 "name": "debug solution", 

wh "configurations": [ 

28 "server", "client" 

29 ] 

30 1 

区 下 | 

2 } 


有 了 这 个 配置 文件 后 , 我 们 就 可 以 在 Visual Studio Code 的 调试 面板 中 进行 启动 项 的 选择 ， 
如 图 10.14 所 示 。 
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启动 服务 。 


【代码 10-16】 tasks.json 文件 代码 示例 : tasks.json 
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DEBUG j* debug solution 
server 
4 VARIABLES Ee 
Clien' 


debug solution 


Add Configuration... 


vv 奖品 


10.14 ”VS Code 调试 面板 启动 项 截图 


在 代码 10-15 中 ， 前 两 个 启动 项 配置 中 有 一 个 preLaunchTask 属性 配置 ， 可 以 用 来 配置 启 
动 的 前 置 任务 。 项 目 启动 时 ， 一 般 先 要 用 tsc 命令 对 项 目 文件 进行 编译 ， 再 调用 相应 的 命令 来 


tasks.json 是 配置 任务 的 文件 ， 具 体 的 内 容 如 代码 10-16 所 示 。 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
ll 
12 
13 
14 
5 
16 
ET 
18 
a 
20 
2 
22 
2 
24 


R 


Sveorslone oO 


metadkone ll 


{ 


"type": "npm", 
(hn 
"label"; "tsc_ server", 
"path": "server/", 


"problemMatcher": [] 


"type": "npm", 

轩 因 各 记 时 太 相合 认 和 交 入 
"1Label": "tsc client", 
"path": "client/", 
"problemMatcher": [] 


"type": "npm", 


aeriptns nota 


"label": "start client", 


"path": "client/", 
"problemMatcher": [], 
"dependsOn":[ 


25 

26 

27 

28 ] 
29 } 


第 10 章 实战 : 使 用 TypeScript+Node 创建 列表 APP 


“tscrelientr 


在 代码 10-16 中 , 配置 了 3 组 npm 类 型 的 任务 , 06 行 的 "script": "tsc" 配 置 表示 要 运行 npm 
run tsc， 而 这 个 tsc 名 称 是 在 server/package.json 中 定义 的 ， 也 就 是 要 执行 tsc 命令 编译 server 


子 项 目的 文件 。 


类 似 的 ，11~17 行 定义 了 client 子 项 目 用 tsc 命令 编译 文件 的 任务 。18~27 行 定 义 了 调用 
client/package.json 中 的 start 脚本 命令 ， 也 就 是 要 启动 lite-server 服务 , 但 是 用 dependsOn 来 说 
明 它 依赖 于 标签 label 为 tsc_client 的 任务 ， 也 就 是 11~17 行 定义 的 任务 。 

至 此 ， 在 Visual Studio Code 中 直接 选择 debug solution 启动 配置 项 即 可 将 客户 端 client 和 
服务 端 server 启动 好 。 成 功 启动 后 ， 界 面 如 图 10.15 所 示 。 


sserverjs x 


oz 
79 
71 
72 
73 
74 
75 
75 
77 
78 
79 
89 


和 server ， e+" where "+ req.body.where; 
rtrd 00 ord 
sql += ”order by ”+ req.body.order 

} 

console.1og(sq1); 

var db = new dbhelper_1.dbHelper(); 

var params = JSON.parse(req.body.params); 

console.log(params); 

db.runsql(sql, params, function (err, ret) { 


if (err) { 
res.json({ succss: 6, message: err.message }); 
} 
alse { 
res.json({ succss; 1, message: ' 成 ', data: ret.recordset }) 


catch (e) { 
res.json({ succss: 9, message: e.message }); 
} 


10.15 ”列表 APP 启动 调试 截图 


从 图 10.15 可 以 看 出 ， 调 试 工具 条 右 侧 有 一 个 下 拉 列 表 ， 可 以 选择 server 和 client。debug 
solution 是 一 个 compounds 组 合 启 动 项 ， 可 以 同时 启动 多 个 启动 项 。 


i H5 开发 APP 应 用 ， 前 期 可 以 在 桌面 浏览 器 中 进行 测试 ， 但 是 有 些 细节 方面 和 手机 浏览 器 
[ 还 是 有 差异 的 。 另 外 ， 苹 果 手 机 用 的 safari 浏览 器 对 JS 的 支持 和 chrome 也 是 有 差异 的 。 
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10.6 运行 APpP 项目 


其 实 正式 运行 此 APP 还 需要 用 Android Studio 或 Xcode 分 别 构建 一 个 Android 版 和 IOS 
版 的 APP 原生 容器 ， 用 来 加 载 此 H5 的 页 面 。 这 里 关于 如 何 构建 容器 就 不 再 痪 述 了 。 我 们 这 


里 直接 采用 在 手机 浏览 器 上 运行 。 


一 般 来 说 ， 正 式 的 项 目 需要 发 布 到 服务 器 上 运行 。 这 里 在 本 地 计算 机 上 模拟 这 个 过 程 。 首 
先 将 Client 端的 文件 复制 出 来 ， 可 以 把 node_modules 文件 夹 删除 ， 如 图 10.16 所 示 。 

这 里 用 IIS Web 服务 器 新 建 一 个 ListAppWeb 网 址 ， 端 口号 最 好 用 80， 因 为 此 端口 一 般 来 
说 是 默认 开通 的 ， 其 他 端口 可 能 需要 额外 配置 才能 访问 ， 如 图 10.17 所 示 。 


名 称 
dist 
libs 
src 
views 
bs-configjson 
国 indexhtml 
package.json 


package-lockjson 


tsconfigjson 


图 10.16 client 项 目 发 布 目录 截图 


| 么 和 0 网 站 


网 站 名 称 (9): 


[swppweb | [lismppweb E20 


内 容 目录 
物理 路 径 (Ph 


[GNweb rooweient 


主机 名 (H): 


去 加 www.contoso.com 或 marketing cortosocom 


回 立即 局 动 网 站 (M) 


图 10.17 client 项 目 IIS 网 址 新 建 截图 


由 于 client 只 是 Web UI， 列 表 APP 要 想 运行 还 需要 开始 Server 端 服 务 。 这 里 在 项 目 根 目 
录 中 创建 一 个 批 处 理 文件 start_server.bat， 并 编辑 里 面 的 内 容 ， 如 图 10.18 所 示 。 


加 start_server.bat - 记事 本 一 口 x 


文件 (月 ”编辑 (E) 格式 (O) 坦 看 (V) 帮助 (H) 
node /server/dist/mainjjs 


10.18 server 项 目 启动 批 处 理 截图 
双击 运行 start_server.bat 文件 时 ， 会 出 现 如 图 10.19 所 示 的 启动 界面 。 
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图 10.19 server 项 目 启动 成 功 截图 


为 了 方便 网 址 输入 ， 可 以 将 http:/192.168.1.105 生成 二 维 码 ， 然 后 用 手机 浏览 器 扫描 二 维 


码 ， 运 行 APP。 登 录 成 功 后 ， 主 界面 如 图 10.20 左 图 所 示 ， 点 击 


如 图 10.20 右 图 所 示 。 


【关于 我 】 则 出 现 详细 界面 ， 


图 10.20 列表 APP 主 界面 和 关于 我 界面 


我 们 单 击 【 便 签 列 表 】， 则 唱 
成 】 将 其 状态 人 


kt 转 到 便签 列表 界面 ， 默 认 显示 未 完成 
多 改 为 已 完成 。 当 然 也 可 以 对 不 需要 的 列表 进行 


弹出 新 建 面板 ， 可 新 增 列表 。 单 才 


和 列表 区 域 ， 弹 出 列表 编辑 界面 ， 如 图 


的 列表 ， 可 以 点 击 【 完 


底部 的 【新 建 】 按钮 ， 


10.21 所 示 。 
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便签 列表 
© 网 沪 外 文 文献 
外 新 学 20 个 英文 单词 


© 有 明天 10 点 写 计划 书 


图 10.21 便签 列表 和 新 建 列表 界面 图 


至 此 ， 我 们 就 用 一 个 简单 的 列表 APP 实战 项 目 将 TypeScript 如 何 构 建 应 用 的 主要 过 程 进 
行 了 演练 。 针 对 简单 的 应 用 ， 往 往 还 体现 不 出 TypeScript 语言 相对 于 JavaScript 语言 的 优势 ， 
或 者 你 还 会 觉得 比 JavaScript 还 麻烦 。 当 构建 一 个 大 型 项 目 时 ， 就 能 更 好 地 体现 TypeScript 的 
优势 了 。 


10.7 小 


本 章 用 实战 项 目的 方式 来 从 零 开始 构建 一 个 简单 的 列表 APP。 列 表 APP 采用 TypeScript 
进行 项 目前 端 client 和 服务 端 server 的 JS 脚本 开发 。 
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JSX 是 一 种 嵌入 式 的 、 类 似 XML 的 语法 ， 可 以 被 转换 成 合法 的 JavaScript〈 尽 管 转换 的 
语义 是 依据 不 同 的 实现 而 定 的 ) 。JSX 因 React 框架 而 流行 , 但 也 存在 其 他 的 实现 。 TypeScript 
支持 内 嵌 、 类 型 检查 以 及 将 JSX 直接 编译 为 JavaScript 的 功能 。 

这 里 主要 涉及 的 知识 点 有 : 


JSX 的 基本 用 法 
as 操作 符 

类 型 检查 
嵌入 的 表达 式 
React 整合 


下 这 里 并 不 深入 介绍 JSX 的 语法 。 | 


『. 基本 用 法 


如 果 要 在 TypeScript 项 目 中 使 用 JSX, 那么 必须 首先 启用 编译 器 的 jsx 选项 , 然后 使 用 JSX 
的 文件 扩展 名 为 .tsx。 这 是 两 个 必须 条 件 。 
TypeScript 具有 3 种 JSX 模式 ， 如 表 £1 所 示 。 


表 f1 JSX 模式 


| 
EE | 

[a jx | 
[ReactcreateElementrdiv) |is | 


preserve: 在 preserve 模式 下 ， 生 成 代码 中 会 保留 JSX 以 供 后 续 的 转换 操作 使 用 ， 输 
出 文件 的 扩展 名 是 .jsx。 


@ react: react 模式 会 生成 ReactcreateElement， 在 使 用 前 不 需要 再 进行 转换 操作 了 ， 输 
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出 文件 的 扩展 名 为 .js。 

@ react-native: react-native 相当 于 preserve， 它 也 保留 了 所 有 的 JSX， 但 是 输出 文件 的 
扩展 名 是 .js。 

这 3 种 模式 只 在 代码 生成 阶段 起 作用 ， 类 型 检查 并 不 受 影响 。 


于 可 以 通过 在 命令 行 里 使 用 --jsx 标记 或 tsconfigjson 里 的 选项 来 指定 模式 。 | 


{.2 as 操作 符 


之 前 的 章节 介绍 过 , 类 型 断言 可 以 对 TypeScript 中 的 类 型 进行 某 种 转换 。 它 的 语法 有 两 种 : 
一 个 是 as 操作 符 ， 另 一 个 是 用 尖 括 号 < >。 类 型 断言 示例 如 下 : 

let man= <person>obj; 

// 或 者 

let man = obj as person; 

这 里 断言 obj 变量 是 person 类 型 的 。 在 TypeScript 中 ， 使 用 尖 括 号 < > 来 表示 类 型 断言 ， 
与 JSX 语法 中 类 似 XML 的 标签 相 冲突 。 因 此 ， 为 了 在 解析 的 时 候 不 会 出 现 歧义 ，TypeScript 
在 .tsx 文件 里 禁用 尖 括 号 < > 的 类 型 断言 。 如 果 需 要 使 用 类 型 断言 ， 就 只 能 选择 另 一 个 类 型 断 
言 操 作 符 ， 即 as 操作 符 。 


坊 as 操作 符 在 二 和 .sx 里 都 可 用 ， 并 且 与 尖 括 号 类 型 断言 是 等 价 的 。 | 


『.3 引 类 型 检查 


为 了 理解 JSX 的 类 型 检查 ， 首 先 必须 理解 固有 元 素 (intrinsic elements) 和 基于 值 的 元 素 
(value-based elements) 二 者 之 间 的 区 别 。 假 设 有 这 样 一 个 JSX 表达 式 <expr />， 其 中 expr 可 

能 是 引用 环境 自 带 的 某 些 元 素 ( 比 如， 在 DOM 环境 里 的 div 或 span 标签 ) ， 也 可 能 是 我 们 自 
定义 的 组 件 标 签 。 

对 于 React 而 言 ， 固 有 元 素 会 生成 如 React.createElement("div") 的 字符 串 ， 但 我 们 自 定义 
的 组 件 却 不 会 生成 。 

传 入 JSX 元 素 里 的 属性 类 型 的 查找 方式 不 同 。 固 有 元 素 属 性 本 身 就 支持 ， 然 而 自 定义 的 
组 件 会 自己 去 指定 它们 具有 哪个 属性 。 
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附录 TypeScript JSX 介绍 
TypeScript 使 用 与 React 相同 的 规范 来 区 别 它们 。 固 有 元 素 总 是 以 一 个 小 写字 母 开 头 ， 基 
于 值 的 元 素 总 是 以 一 个 大 写字 母 开头 。 
1. 固有 元 素 
固有 元 素 使 用 特殊 的 接口 JSX.IntrinsicElements 来 查找 。 默 认 情况 下 ， 若 这 个 接口 没有 明 
确 指定 ， 则 不 对 固有 元 素 进行 类 型 检查 。 如 果 这 个 接口 存在 ， 那 么 固有 元 素 的 名 字 需 要 在 


JSX.IntrinsicElements 接口 的 属性 里 注册 。 代 码 他 1 给 出 固有 元 素 使 用 接口 JSX.IntrinsicElements 
进行 属性 注册 的 示例 。 


【代码 f1】 JSX.IntrinsicElements 接口 属性 注册 示例 代码 : gy.tsx 


01 declare global { 


02 namespace JSX { 

03 interface IntrinsicElements { 
04 mydiv: any7 

05 mybar: any7 

06 } 

07 } 

08 } 


09 <mydiv/> // 正 确 
10 ”<xmybar/> // 错 误 


在 代码 个 1 中 ，01 行 声明 了 一 个 global 对 象 ，02 行 定义 了 一 个 命名 空间 JSX， 在 此 JSX 
命名 空间 下 对 接口 IntrinsicElements 的 属性 进行 定义 。04~05 行 分 别 定义 了 一 个 类 型 为 any 的 
mydiv 和 bar 属性 。 

因此 ，09 行 中 的 <mydiv/> 是 没有 语法 错误 的 ， 但 是 <mybar> 在 语法 检查 的 时 候 会 报错 ， 
因为 它 没 在 JSX.IntrinsicElements 接口 里 定义 。 


可 以 在 接口 JSX.IntrinsicElements 上 指定 一 个 用 来 捕获 所 有 字符 串 索 引 的 属性 定义 ， 这 样 
| 就 可 以 匹配 任何 属性 ， 如 代码 f2 所 示 。 


【代码 f2】 JSX.IntrinsicElements 接口 通用 属性 注册 示例 代码 : gy2.tsx 


01 declare global { 


02 namespace JSX { 

03 interface IntrinsicElements { 
04 [elemName: string]: any7 
05 } 

06 } 

07 } 


08 <bar1/> 


在 代码 f-2 中 ，04 行 指定 了 用 来 捕获 所 有 字符 串 索 引 的 属性 定义 ， 即 [elemName: string]: 
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any， 这 样 08 行 的 <barl/> 也 可 以 被 识别 ， 不 会 报 语法 错误 。 

2. 基于 值 的 元 素 

基于 值 的 元 素 会 简单 地 在 它 所 在 的 作用 域 里 按 标识 符 查 找 。 目 前 有 两 种 方式 可 以 定义 基于 
值 的 元 素 : 一 种 是 无 状态 函数 组 件 (Stateless Functional Component) ; 另 一 种 是 类 组 件 (Class 
Component) 。 由 于 这 两 种 基于 值 的 元 素 在 JSX 表达 式 里 无 法 区 分 ， 因 此 TypeScript 首先 会 党 
试 将 表达 式 作为 无 状态 函数 组 件 进行 解析 。 如 果 解 析 成 功 , 那么 TypeScript 就 完成 了 表达 式 到 
其 声明 的 解析 操作 。 如 果 解 析 失 败 ， 那 么 TypeScript 会 继续 尝试 以 类 组 件 的 形式 进行 解析 。 如 
果 依 旧 失败 ， 那 么 将 输出 一 个 错误 。 

无 状态 函数 组 件 被 定义 成 JavaScript 函数 ， 它 的 第 一 个 参数 是 props 对 象 。TypeScript 会 
强制 将 返回 值 赋 给 JSX.Element。 代 码 人 3 给 出 无 状态 函数 组 件 示例 。 


【代码 f3】 无 状态 函数 组 件 示例 代码 : sfc.tsx 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
El 


interface MyProp { 
name: string; 
X: number; 
Y: number; 
declare function MyComponent (prop: { 
name: string, x: number 
}): JSX.Element; 
function MyComponentProp (prop: MyProp) { 
return <MyComponent name={prop.name} x={prop.X} />; 
¥ 


由 于 无 状态 函数 组 件 是 简单 的 JavaScript 函数 ， 因 此 我 们 可 以 利用 函数 重 载 来 定义 无 状态 


函数 组 件 。 


我 们 也 可 以 定义 类 组 件 的 类 型 ， 即 类 组 件 。 类 组 件 中 有 两 个 新 的 术语 : 元 素 类 的 类 型 和 元 
素 实例 的 类 型 。 假 设 现 在 有 一 个 语句 <Expr />， 那 么 元 素 类 的 类 型 为 Expr。 代 码 f-4 给 出 一 个 
类 组 件 示 例 。 


【代码 f4】 类 组 件 示例 代码 : classComponent.tsx 


01 
02 
03 
04 
05 
06 
07 


class MyClassComponent { 
render() { } 
} 
// 使 用 构造 签名 
Var myComponent = new MyClassComponent (); 
// 元 素 类 的 类 型 => MyClassComponent 
// 元 素 实例 的 类 型 => { render: () => void } 


在 代码 f4 中 ,MyClassComponent 是 ES6 的 类 ， 那么 类 类 型 就 是 类 的 构造 函数 和 静态 部 
分 。 如 果 MyClassComponent 是 一 个 工厂 函数 ， 那 么 类 类 型 为 这 个 函数 。 
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类 组 件 的 实例 类 型 由 类 构造 器 或 调用 工厂 函数 的 返回 值 确 定 。 在 ES6 类 的 情况 下 ， 实 例 
类 型 为 这 个 类 的 实例 类 型 ， 如 果 类 类 型 是 工厂 函数 ， 那 么 实例 类 型 为 这 个 函数 返回 值 类 型 。 


必 元 元 素 的 实例 类 型 必须 赋值 给 JSX.ElementClass， 否 则 会 抛 出 一 个 错误 。 | 


属性 类 型 检查 的 第 一 步 是 确定 元 素 属性 类 型 。 对 于 固有 元 素 ， 就 是 JSX.IntrinsicElements 
属性 的 类 型 。 代 码 人 5 给 出 一 个 类 组 件 示 例 。 


【代码 f5】 属性 类 型 检查 示例 代码 : mydivComponent.tsx 


01 declare namespace JSX { 


02 interface IntrinsicElements { 

03 mydiv: { requiredProp: string; optionalProp?: number } 

04 } 

05 } 

06 <mydiv requiredProp="bar" />; // 正确 

07 <mydiv requiredProp="bar" optionalProp={31} />; // 数 值 用 {} 正确 
08 <mydiv requiredProp="bar" optionalProp=31 />; // 错 误 

09 <mydiv />; // 错误 ， 缺少 requiredProp 

10 <mydiv requiredProp={21} />; // 错误 ，requiredProp 应 该 是 字符 串 


11 <mydiv requiredProp="bar" unknownProp />; // 错误 ，unknownProp 不 存在 

12 <mydiv requiredProp="bar" data-prop />;// 正 确 , data-prop 不 是 一 个 合法 的 标识 符 

其 中 ，03 行 mydiv 的 元 素 属 性 类 型 为 { requiredProp: string; optionalProp?: number } 。 元 素 
属性 类 型 用 于 JSX 里 进行 属性 的 类 型 检查 ， 支 持 可 选 属 性 和 必需 属性 。 


| 如 果 一 个 属性 名 不 是 合法 的 JS 标识 符 ( 像 data-* 属 性 ) ， 即 使 它 没有 出 现在 元 素 属性 类 
| 型 里 ， 也 不 会 当 作 一 个 错误 。 


从 TypeScript 2.3 开始 ， 引 入 了 children 类 型 检查 。children 是 元 素 属性 类 型 的 一 个 特殊 属 
性 ， 子 JSXExpression 将 会 被 插入 到 属性 里 。 它 与 使 用 JSX.ElementAttributesProperty 来 决定 
prop 名 类 似 ， 可 以 利用 JSX.ElementChildrenAttribute 来 决定 children 名 。 代 码 人 6 给 出 了 子孙 
类 型 检查 示例 。 


【代码 f6 】 子孙 类 型 检查 示例 代码 : childComponent.tsx 


01 interface PropsType { 


02 children: JSX.Element 

03 name: string 

04 } 

05 class Component extends React.Component<PropsType, {}> { 
06 render() { 

07 return ( 

08 <h2> 
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09 {this.props.children} 
10 </h2> 

Eb 

12 } 

了 3 


14  // 必 须 有 属性 name 

于 本 <Component name="jack"><hl>Hello World</h1></Component> 

16 ”// 错误 : children 不 能 是 JSX.Element 数组 

Tt //<Component name="jack"><hl>Hello World</h1l><h2>Hello World</h2> 
</Component> 

18 ”// 错误 : children 不 是 JSX.Element ,不 能 是 文本 

19 //<Component name="jack">Hello World</Component> 


若 不 特殊 指定 子孙 的 类 型 ， 则 将 使 用 React typings 里 的 默认 类 型 。 默 认 JSX 表达 式 结果 
的 类 型 为 any。 


嵌入 的 表达 式 


JSX 允许 使 用 { } 标 签 来 内 嵌 表 达 式 ， 如 下 所 示 。 


01 var a = <div> 
02 {['fo0', 'bar'] .map(function (i) { return <span>{i}</span>; })} 
03 </div> 


JSX 本 身 也 是 一 个 表达 式 。 在 编译 后 ，JSX 表达 式 会 变 成 普通 的 JavaScript 对 象 。 可 以 在 
让 语句 或 for 循环 中 使 用 JSX， 也 可 以 将 它 赋 值 给 变量 ， 作 为 参数 接收 并 在 函数 中 返回 JSX。 


”TypeScript+React 整合 


TypeScript 中 使 用 JSX, 就 要 用 到 React, 那么 TypeScript 如 何 和 React 结合 在 一 起 使 用 呢 ? 
首先 新 建 一 个 文件 夹 appendix， 作 为 项 目 根 目录 ， 如 下 所 示 。 
appendix 
[1 
~—sre 
| FFC components 
一 一 tsconfig.json 
TypeScript 文件 会 放 在 src 文件 夹 里 ， 通 过 TypeScript 编译 器 编译 ,然后 经 webpack 处 理 ， 
最 后 生成 一 个 bundle.js 文件 放 在 dist 目录 下 ,我们 自 定 义 的 组 件 将 会 放 在 src/components 文件 
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夹 下 。 首 先 用 如 下 命名 初始 化 项 目 : 
npm init 


此 命令 会 生成 一 个 package.json 文件 。 首 先 确保 已 经 安装 了 webpack， 具 体 执行 如 下 命令 
(全 局 安装 ): 


npm install -g webpack 
或 者 本 地 安装 webpack 也 可 以 ， 命 令 如 下 : 
npm install --save-dev webpack 


webpack 工具 可 以 将 你 的 所 有 代码 及 其 依赖 文件 捆绑 成 一 个 单独 的 js 文件 。 现 在 添加 
React、React-DOM 以 及 它们 的 声明 文件 到 packagejson 文件 里 作为 依赖 。 可 执行 如 下 命令 安 
装 依赖 : 

npm install --save react react-dom 

npm install --save @types/react Q@types/react-dom 


使 用 @types/ 前 级 表示 我 们 额外 要 获取 React 和 React-DOM 的 声明 文件 。 通 常 当 你 导入 
"react" 这 样 的 路 径 时 ， 它 会 查看 react 包 ; 然而 ， 并 不 是 所 有 的 包 都 包含 了 声明 文件 ， 所 以 
TypeScript 还 会 查看 @types/react 包 。 

接 下 来 ， 需 要 添加 开发 时 的 依赖 awesome-typescript-loader 和 source-map-loader， 命 令 
如 下 [1 

npm install --save-dev typescript 


npm install --save-dev awesome-typescript-loader 


npm install --save-dev source-map-loader 


这 些 依赖 会 让 TypeScript 和 webpack 在 一 起 良好 地 工作 。 其 中 ，awesome-typescript-loader 
可 以 让 webpack 使 用 TypeScript 的 标准 配置 文件 tsconfigjson 编译 TypeScript 代码 。 
source-map-loader 使 用 TypeScript 输出 的 sourcemap 文件 来 告诉 webpack 何 时 生成 自己 的 
sourcemaps。 这 就 允许 在 调试 最 终生 成 的 文件 时 就 好 像 在 调试 TypeScript 源码 一 样 。 

编辑 tsconfigjson 文件 ， 它 包含 了 输入 文件 列表 以 及 编译 选项 。tsconfig .json 内 容 如 下 : 


01 1 

02 "compilerOptions": { 

03 -ueDire er Ww NdList/ny 

04 "sourceMap": true, 

05 "noImplicitAny": true, 

06 "module": "commonjs", 

07 "target": "es5", 

08 "jsx": "react" // 指 定 jsx 模式 
09 Fe 

10 "include": [ 
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4 
12 
I 
14 
15 
16 


ds td ide 
{1 
"exclude": [ 


"./node modules" 


下 面 使 用 React 写 一 段 TypeScript 代码 。 首 先 ， 在 src/components 目录 下 创建 一 个 名 为 
Hello.tsx 的 文件 ， 代 码 如 代码 人 7 所 示 。 


【代码 f7】 Hello React 控件 示例 代码 : Hello.tsx 


01 
02 
03 
04 
05 
06 
07 
08 


09 
10 


import * as React from "react"; 
export interface HelloProps { 
compiler: string; 
framework: string; 
和 
export class Hello extends React.Component<HelloProps, {}> { 
render() { 
return <hl>Hello from {this.props.compiler} and {this.props. 
framework}!</h1l>; 
} 


接 下 来 ， 在 src 下 创建 index.tsx 文件 ， 代 码 如 代码 f-8 所 示 。 
【代码 f8】 index.tsx 示例 代码 : index.tsx 


01 
02 
03 
04 
05 
06 


import * as React from "react"; 

import * as ReactDOM from "react-dom"; 

import { Hello } from "./components/Hello"; 

ReactDOM.render (<Hello compiler="TypeScript" framework="React" />, 
document .getElementById ("example") 

a 


在 代码 f8 中 ， 仅 仅 将 Hello 组 件 导入 index.tsx。 


不 同 于 "react" 或 "react-dom"， 我 们 使 用 Hello.tsx 的 相对 路 径 ， 这 很 重要 。 如 果 不 这 样 做 ， 
TypeScript 只 会 尝试 在 node_modules 文件 夹 里 查找 。 


我 们 还 需要 一 个 页 面 来 显示 Hello 组 件 。 在 根 目 录 下 创建 一 个 名 为 index.html 的 文件 ， 其 
内 容 如 代码 £9 所 示 。 


【代码 f9】 index.html 示例 代码 : index.html 


01 
02 
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<!DOCTYPE html> 
<html> 


03 
04 
05 
06 
07 
08 
09 
10 
Eh 


12 
3 
14 
EE 
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<head> 
<meta charset="UTF-8" /> 
<title>Hello React!</title> 
</head> 
<body> 
<div id="example"></div> 
<!-- react 依赖 包 --> 
<script src="./node modules/react/umd/react.development .js"></script> 


<script src="./node modules/react-dom/umd/react-dom.development. 


js"></script> 

打包 六 人 二 -> 

<script src="./dist/bundle.js"></script> 
</body> 
</html> 


需要 注意 一 点 ， 我 们 是 从 node_modules 引入 的 文件 。React 和 React-DOM 的 npm 包 里 包 
含 了 独立 的 ,js 文件 ， 可 以 在 页 面 中 引入 。 当然 最 好 将 它们 复制 到 其 他 目录 中 ， 或 者 从 CDN 
上 引用 ,在 工程 根 目录 下 创建 一 个 webpack.configjs 文件 用 于 打包 , 具体 内 容 如 代码 f-10 所 示 。 


【代码 后 10】 webpack 配置 文件 示例 代码 : webpack.config.js 


01 
02 
03 
04 
05 
06 
07 
08 
09 
10 
ET 
2 
13 
14 
Ss 
16 
17 
18 
9 
20 
21 
22 
3 


module.exports = { 
entry: "./src/index.tsx", 
output: { 
filename: "bundle.js", 
Path: _ dirname + "/dist" 
}, 
// 调试 需要 
devtool: "source-map", 
resolve: { 
// 添 加 '.ts' and '.tsx' 扩展 ,从 而 运行 解析 
Ortonsionss I"ota "itax™ mae me joon™l 
}, 


module: { 
rules: [ 
//'.ts' 或 '.tsx' 扩展 文件 将 被 处 理 
{ 


test: /\.tsx?$/, 

loader: "awesome-typescript-loader" 
上 
// 所 有 的 ' .js' 被 预 处 理 
{ 

enforce: "pre", 

teat: /NJes/sr 
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24 loader: "source-map-loader" 


27 ]， 

28 externals: { 

29 "reoact"s "React™, 

30 "react-dom": "ReactDOM" 


三 }; 


读者 可 能 对 externals 属性 有 所 疑惑 。 我 们 想 要 避免 把 所 有 的 React 都 放 到 一 个 文件 里 ， 因 
为 会 增加 编译 时 间 并 且 浏 览 器 还 能 够 缓存 没有 发 生 改变 的 库 文件 。 
理想 情况 下 , 我 们 只 需要 在 浏览 器 里 引入 React 模块 , 但 是 大 部 分 浏览 器 还 没有 支持 模块 。 
因此 ， 大 部 分 代码 库 会 把 自己 包 庄 在 一 个 单独 的 全 局 变量 内 ， 如 jQuery， 这 叫 作 “命名 空间 ” 
模式 。webpack 允许 我 们 继续 使 用 通过 这 种 方式 写 的 代码 库 。 通 过 设置 "react": "React"， 
webpack 会 神奇 地 将 所 有 对 "react" 的 导入 转换 成 从 React 全 局 变量 中 加 载 。 

最 后 编辑 package.json， 具 体内 容 如 代码 人 11 所 示 。 


【代码 下 11】 package.json 配置 示例 代码 : package.json 


01 { 

02 "name": "appendix", 

03 "version": "1.0.0", 

04 voscriptlonms mn 

05 "main": "index.js", 

06 YBCEUPESRSE 

07 "test": "echo \"Error: no test specified\" && exit 1", 
08 "webpack": "webpack" 

09 }, 

10 "author": "jackwang", 

| "license": "ISC", 

12 "devDependencies": { 

Es 医 ] "awesome-typescript-loader": "^5.2.1", 
14 "source-map-loader": "^0.2.4", 
Eh mEyDOSCrLoE ee Md I 

16 "webpack": "^4.29.6", 

17 "webpack=cli": "^3.3.0" 

18 }, 

19 "dependencies": { 

20 "@types/react": "^16.8.8", 

kb "etypes/react-dom": "^16.8.2", 
2 "react": "^16.8.4", 

| "react=-dom": 16.8.4” 

24 } 
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25 } 
在 Visual Studio Code 的 命令 行 中 运行 如 下 命令 ， 对 项 目 进行 打包 : 
npm run webpack 


成 功 执行 后 ， 用 浏览 器 就 可 以 预览 index.html 页 面 了 ， 如 图 £1 所 示 。 


Hoo Rosen x 和 


3 © © 了 人 | Gsrdappendiyindechiml 


Hello from TypeScript and React! 


图 £1 index.html 运行 界面 


343 


